1

だから私はここにこのコードを書いた：

highlighter: function (item) {
    var parts = this.query.split(" ");
    var length = parts.length;
    for (var i = 0; i < length; i++){
        if(parts[i] != ""){
            item = item.replace(new RegExp('(' + parts[i] + ')', 'ig'), function ($1, match) {
                return '<strong>' + match + '</strong>'
            })
        }
    }

  return item;
}

それが何をするか：

  • 私は文字列を持っていますitem、そして文字列this.query
  • 各スペースで分割this.queryし、結果の部分文字列をに入れますparts[]

私の目標は、サブストリングのすべての出現をparts[]太字itemにすることです。

だからもし

item = "This is some text"

と

this.query = "This some"

欲しい<strong>This</strong> is <strong>some</strong> text。

<strong>これは、要素自体で一致する場合を除いて、完全に機能します。strongそのため、タグ自体に含まれていない一致のみを置き換えたいと思います。結果の文字列が含まれているためong>ですtrong>。これは可能ですか？

4

4 に答える 4

1

これらの言語にはネイティブの否定的な後読みがないため、 を置き換えるときにタグを無視したい場合は、それらを一致させて、次のように自分自身に置き換える必要があります。

item = item.replace(
  new RegExp(
    "(<\\/?\\w+(\\s+\\w+(\\s*=\\s*(\"[^\"]*\"|'[^']*'|\\S+))?)*>)"
      + "|(" + parts.join("|") + ")",
    "ig"),
  function (match, tag, p2, p3, attributeValue, matchedText) {
    if (tag)
    {
      return tag;
    }

    return "<strong>" + matchedText + "<\/strong>";
  });

(ループは必要ありません)

\w+は、要素タイプ名または属性名で許可されている文字の概算に\sすぎず、マークアップの空白の概算にすぎないことに注意してください。

RegExp検索語をコンストラクターへの文字列引数として使用する場合は、検索語をエスケープする必要がある場合もあります。そのために、ここで必要なエスケープ シーケンスの数に混乱している場合は、 JSX:regexp.js を参照してString.prototype.regExpEscape()くださいRegExp.prototype.concat()。

于 2012-05-13T17:01:50.050 に答える
1

強力なタグを避けたい場合は、すべて 1 つのステップで置換を行います。

item = item.replace(
    new RegExp(parts.join('|'), 'ig'),
    function (match) {
        return '<strong>' + match + '</strong>'
    }
)

始める前に「item」に strong が含まれていても問題はありますが、それ以外の場合は問題ありません。

編集：

「this」、「that」、「the other」を一致させたいとしましょう。正規表現、またはそのRegExpための is This|some|the other. 奇妙なことに、渡された文字列はnew RegExp正規表現として解析されます。

注意すべきもう 1 つの重要な点は、が見つかったすべての一致を、それぞれを呼び出した結果にitem.replace(regex, callback)置き換えることです。callback に渡される最初の引数は正規表現の一致全体であり、残りの引数は一致内のグループです。callback(match, ...)

もっと知りたい場合は、正規表現を読んでください。

于 2012-05-13T15:06:49.467 に答える
0

タグの外側のみを検索するには、すべての HTML タグを除外し、検索可能なタグ間のテキストのみを表示できるパーサーが必要です。特定のアプリケーションがどのように機能するかはわかりませんが、多くの場合、パーサーを取得するのに最適な場所は、ブラウザーに HTML を解析させ、タグ間にある結果のテキストノードのみを検索させることです。

于 2012-05-13T15:02:23.357 に答える
0

私が使用したソリューション！:

highlighter: function (item) {
    var parts = this.query.replace(/\s+/g, " ").replace(/^\s|\s$/g,"").split(/\s/);
    if( item.match(/(?:&[^;]*;)+/) != null){
        item = strip(item);
    }
    item = item.replace(
        new RegExp('(' + parts.join('|') + ')', 'ig'),
        function (_, match) {
            return '<strong>' + match + '</strong>'
        }
    )
    return item;
}

これが私が関数に変えたものです。最初の行は、末尾のスペースと一連のスペースを取り除くことです。これは、正しい分割を行うために必要でした。そうしないと、蛍光ペンがすべてのスペースを強調表示してしまいます。（HTMLを見た場合にのみ見ることができました）。次に、アイテムに特殊文字が含まれていないかどうかを確認します。もしそうなら、私はこの関数を使用してそれらを取り除きます:

function strip(html)
{
    var tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    return tmp.textContent||tmp.innerText;
}

次に、Eric のコードを使用した置換部分を行います。

どうもありがとう！また、正規表現についても少しよく知ることができました。

于 2012-05-15T00:12:33.807 に答える