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

2 番目がトリッキーだった理由がわかりますか? ;)

于 2013-09-03T11:03:15.870 に答える
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 に答える