1

オートコンプリート（カスタムメイドのオートコンプリート）がある入力フィールドがあります。

ユーザーが単語を入力すると、一致するフレーズが表示されますが、ユーザーが入力した単語の色は異なるはずです。

たとえば、 「He​​llo World」のような文字列があり、ユーザーが「ll」と入力した場合、 「ll」を含む一致するフレーズのリストを取得する必要がありますが、「ll」の色は異なるはずです。

したがって、「Hello World」をスプライスする方法が必要なので、：を取得し、 「ll」["he","ll","o World"]をラップしてスタイルを設定できます。<span>

4

4 に答える 4

5

置換を使用できます

strhtml.replace (/yourstrToSearch/g, '<span class="cl">' + 'yourstrToSearch' + '</span >');

編集：

yourstrToSearch = "ll";
var regex = new RegExp( yourstrToSearch, "gi");
$('#div1').html($('#div1').html().replace(regex, '<span class="cl">' + yourstrToSearch + '</span >'));

ライブデモ

于 2013-01-21T09:55:29.983 に答える
3

考えられる正規表現の解決策の 1 つ:

var part = "ll";
"Hello World".match(new RegExp("^(.*)(" + part + ")(.*)$")).slice(1);
// >> ["He", "ll", "o World"]
于 2013-01-21T09:55:10.953 に答える
2

文字列を分割することを忘れてください。この場合、match（この例ではll）を次のようにspanに置き換える方がはるかに簡単です。

'Hello World'.replace(/(ll)/g, '<span>$1</span>');

または、さらに良いことに、テキスト内の各llに異なるスタイルを持たせたい場合は、次のように関数を渡して関数を置き換えることができます。

var i = 0;
'Hello Hello World'.replace(/(ll)/g, function(match) {
    i++;
    return '<span class="highlight-'+i+'">'+match+'</span>;
});

// above returns - you can style highlight-1 .. n so each of them have different color
'He<span class="highlight-1">ll</span>o He<span class="highlight-2">ll</span>o World'
于 2013-01-21T10:02:56.093 に答える
1

ここでの秘訣は、置換文字列にドットや中括弧などの正規表現の特殊文字が含まれていると失敗するため、正規表現を使用しないことです。したがって、文字列をそのまま に渡すだけですreplace。

str = 'Hello Hello World'
sub = 'll'
result = str.replace(sub, '<span>$&</span>')

subこれは、多数ある場合に最初に出現したもののみを置き換えることに注意してください。ただし、おそらくそれが望ましい方法です。

于 2013-01-21T10:51:52.640 に答える