JavaScript-替换html字符串中的特定单词索引_Javascript_Html_String_Replace

JavaScript-替换html字符串中的特定单词索引

javascript html string replace

JavaScript-替换html字符串中的特定单词索引,javascript,html,string,replace,Javascript,Html,String,Replace,我在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> 像这样的时候我不知道该怎么办做其他时候我没有

我在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）替换为文本：

times

因此，最终的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>

有时
像这样我不知道该怎么办。其他时候我没有问题。

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

我会首先通过标记过滤后的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>';

var html=”像这样的时候，我不知道该怎么办。其他时候我没有问题；

在案例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>'
});

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
});

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;
  })
});

var-tokens=html.replace（/]*>/g'，）.split（/\W+/）.filter（布尔值）；
var newHTML=html.replace（新的RegExp（'\\b'+tokens[1]+'\\b'，g'），函数{
返回“+s+”
});

案例2，您只想替换指定索引处的单词（这一个非常复杂）：

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>'
});

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
});

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;
  })
});

var-tokens=html.replace（/]*>/g'，）.split（/\W+/）.filter（布尔值）；
变量wordToReplaceIndex=1，wordToReplace=tokens[wordToReplaceIndex]；
var-occIndex=0；
对于（var i=0；i（[^我将首先通过标记过滤的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>';

var html=“像这样的时候我不知道该怎么办。其他时候我没有问题。”；

在案例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>'
});

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
});

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;
  })
});

var-tokens=html.replace（/]*>/g'，）.split（/\W+/）.filter（布尔值）；
var newHTML=html.replace（新的RegExp（'\\b'+tokens[1]+'\\b'，g'），函数{
返回“+s+”
});


案例2，您只想替换指定索引处的单词（这一个非常复杂）：
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>'
});

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
});

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;
  })
});

var-tokens=html.replace（/]*>/g'，）.split（/\W+/）.filter（布尔值）；
变量wordToReplaceIndex=1，wordToReplace=tokens[wordToReplaceIndex]；
var-occIndex=0；
对于（var i=0；i（[^var html=”在这种情况下，我不知道该怎么办。其他时候我没有问题。”；
var tokens=html.replace（“Times”，“Times”）；
var html=“像这样的时候，我不知道该怎么办。其他时候我没有问题。”；
var tokens=html.replace（“Times”，“Times”）；
我一直在使用这个jQuery插件来替换/编辑DOM中任何部分的文本。它非常有用，并且易于使用，完全支持正则表达式
我一直在使用这个jQuery插件来替换/编辑DOM中任何部分的文本。它非常有用，并且易于使用，完全支持正则表达式
我认为一个不错的解决方案是拆分和替换，然后加入。下面是一个示例：
<div id="replace-me">Hello, world</div>

你好，世界


replaceWordAtIndex=函数（文本、索引、替换）{
text=text.split（“”）；
文本[索引]=替换；
text=text.join（“”）；
返回文本；
}
wrapWordAtIndex=函数（文本、索引、前、后）{
text=text.split（“”）；
文本[索引]=前+文本[索引]+后；
text=text.join（“”）；
返回文本；
}
var obj=document.getElementById（'replace-me'）；
obj.innerText=replaceWordAtIndex（obj.innerText，1，'Universe'）；
obj.innerHTML=wrapWordAtIndex（obj.innerText，1，，“”）；


应导致：
<div id="replace-me">Hello, <b>Universe</b></div>

你好，宇宙

这里有一个很好的解决方案，可以看到它的实际应用
我认为一个不错的解决方案是拆分并替换，然后加入。下面是一个示例：
<div id="replace-me">Hello, world</div>

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);
}

你好，世界


replaceWordAtIndex=函数（文本、索引、替换）{
text=text.split（“”）；
文本[索引]=替换；
text=text.join（“”）；
返回文本；
}
wrapWordAtIndex=函数（文本、索引、前、后）{
text=text.split（“”）；
文本[索引]=前+文本[索引]+后；
text=text.join（“”）；
返回文本；
}
var obj=document.getElementById（'replace-me'）；
obj.innerText=replaceWordAtIndex（obj.innerText，1，'Universe'）；
obj.innerHTML=wrapWordAtIndex（obj.innerText，1，，“”）；


应导致：
<div id="replace-me">Hello, <b>Universe</b></div>

你好，宇宙

下面是一个可以看到它实际运行的函数smartReplace（str、index、strReplace）{
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);
}

var wStart=0，wEnd=0；
var startInd=str.indexOf（“>”）+1；
var-wc=0；
对于（i=startInd；我调用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>");

var str1=“像这样的时候我不知道该怎么办。其他时候我没有问题。）”；
smartReplace（str1,3，“时代”）；
功能智能替换（str、index、strReplace）{
var wStart=0，wEnd=0；
var startInd=str.indexOf（“>”）+1；
var-wc=0；
对于（i=startInd；我调用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>");

var str1=“像这样的时候我不知道该怎么办。其他时候我没有问题。）”；
smartReplace（str1,3，“时代”）；
您的解决方案只替换第一次出现的问题，不确定它们是否符合要求。在问题示例中，这是第一次出现。要替换所有出现的问题，只需添加g
标志。我明白了，只要让OP知道，这可能是他/她的问题中的错误：）我仍在努力理解您的代码，但无论如何，您在“案例2”中的解决方案非常有效。我对正则表达式不太了解，所以我不知道为什么它很棘手：）非常感谢！您的解决方案只替换第一次出现的问题，不确定它们是否符合要求。在问题示例中，这是第一次出现。要替换所有出现的问题，只需添加g
标志。我明白了，只是让OP意识到，这可能是他/她的问题中的错误：）我仍在努力理解你的代码，但无论如何，你在“案例2”中的解决方案非常有效。我对正则表达式不太了解，所以我不知道为什么会这样