2

我在 JS 字符串操作方面有一个具有挑战性的任务：有一个 HTML 字符串，我需要在其中替换特定单词索引处的单词。单词索引是忽略 HTML 标记时单词的编号。

例如，这里是 HTML 字符串：

<span style="font-family:Times New Roman;">At times like this I don't know what to
do. Other times I have no problem.</span>

任务是用文本替换 html 中的第 2 个单词（即单词 times）：<span style="color:red;">times</span>

所以最终的 HTML 字符串应该是：

<span style="font-family:Times New Roman;">At <span style="color:red;">times</span> 
like this I don't know what to do. Other times I have no problem.</span>

对这个挑战有什么想法吗？

4

5 回答 5

2

我会首先通过标记过滤的 HTML 来找到这个词，然后进行替换。

让我们从你的字符串开始：

var html = '<span style="font-family:Times New Roman;">At times like this don\'t know what to do. Other times I have no problem.</span>';

情况 1，您要替换所有出现的事件：

var tokens = html.replace(/<[^>]*>/g,'').split(/\W+/).filter(Boolean);
var newHTML = html.replace(new RegExp('\\b'+tokens[1]+'\\b', 'g'), function(s){
     return '<span style="color:red;">'+s+'</span>'
});

示范

情况 2，您只想替换指定索引处的单词（这个非常棘手）：

var tokens = html.replace(/<[^>]*>/g,'').split(/\W+/).filter(Boolean);
var wordToReplaceIndex = 1, wordToReplace = tokens[wordToReplaceIndex];
var occIndex = 0;
for (var i=0; i<wordToReplaceIndex; i++) {
   if (tokens[i]===wordToReplace) occIndex++;
}
i=0;
var newHTML = html.replace(new RegExp('\\b'+wordToReplace+'\\b', 'g'), function(s){
    return (i++===occIndex) ? '<span style="color:red;">'+s+'</span>' : s
});

示范

案例 2 的替代解决方案：

var i=0, wordToReplaceIndex = 1;
var newHTML = html.replace(/>([^<]+)</, function(txt) {
  return txt.replace(/\w+/g, function(s) {
    return i++==wordToReplaceIndex ? '<span style="color:red;">'+s+'</span>' : s;
  })
});

你能看出为什么第二个很棘手吗？;)

于 2013-09-03T11:03:15.870 回答
1 
function smartReplace(str,index,strReplace){

    var wStart=0,wEnd=0;
    var startInd=str.indexOf(">")+1;    
    var wc=0;
    for(i=startInd;i<str.length;i++)
    {
        if (str.charAt(i) == ' ')
        {
            wc=wc+1;
            if (wc==index) 
            {   
                wEnd=i-1;
                break;
            }
            wStart=i+1;
        }
    }

    var newString = str.substring(0,wStart) + strReplace + str.substring((wEnd +1),(str.length-1));
    document.write(newString);
}

> 调用 smartReplace() 如下

var str1="<span style=\"font-family:Times New Roman;\">At times like this I don't know what to do. Other times I have no problem.</span>)";
smartReplace(str1,3,"<span style=\"color:red;\">times</span>");
于 2013-09-03T13:49:21.773 回答
1

我认为一个不错的解决方案是拆分和替换然后加入。这是一个例子：

<div id="replace-me">Hello, world</div>

replaceWordAtIndex = function (text, index, replacement) { 
    text = text.split(' ');
    text[index] = replacement;
    text = text.join(' ');
    return text;
}

wrapWordAtIndex = function (text, index, before, after) { 
    text = text.split(' ');
    text[index] = before + text[index] + after;
    text = text.join(' ');
    return text;
}

var obj = document.getElementById('replace-me');
obj.innerText = replaceWordAtIndex(obj.innerText, 1, 'Universe');
obj.innerHTML = wrapWordAtIndex(obj.innerText, 1, '<b>', '</b>');

应该导致：

<div id="replace-me">Hello, <b>Universe</b></div>

这是一个JSFiddle 供您查看

于 2013-09-03T12:04:17.597 回答
0

我一直在使用这个 jQuery 插件来替换/编辑 DOM 的任何部分中的文本。非常有用且易于使用，具有完整的 REGEX 支持

http://benalman.com/projects/jquery-replacetext-plugin/

于 2013-09-03T11:56:26.830 回答
0 
var html = '<span style="font-family:Times New Roman;">At times like this don\'t know what to do. Other times I have no problem.</span>';
var tokens = html.replace("Times","<span style="color:red;">times</span>");
于 2013-09-03T11:52:40.427 回答