2

テキストの段落を表示し、ユーザーが個々の単語をクリックして強調表示できるようにする方法を探しています。

各単語の周りにスパンを配置するコードを見つけました。そして、これはすべてうまく機能しますが...

Soufflé などのテキストがある場合、それは 1 つの単語として認識されません。

これが私が使用しているコードです。

var p = $('#storyText');

p.html(function(index, oldHtml) {
    return oldHtml.replace(/\b([\w+-éñó\u00F1\u00E9]+)\b/g, '< span class="storyWord">$1< /span>');
})

単語の最初または最後にアクセントが付くまではうまくいくようです。

4

1 に答える 1

1

問題は、javascript RegExp の単語文字が単純に として定義されている[a-zA-z0-9_]ため、単語文字\bとアクセント付き文字の間の「境界」に一致することです。単語を直接一致させると改善されます。

$.fn.highlightWords = function(){
  return this.html(function(i, html){
    return html.replace(/([\w'+-éñó\u00F1\u00E9])+/g, function(m){
        return '<span>'+m+'</span>'
    })
  })
}

$('p').highlightWords()

デモ: http://jsbin.com/elegod

于 2012-05-27T01:42:30.333 に答える