7

私の Web ブラウザーのユーザー スクリプト プロジェクトでは、テキストと同じ親ノードの下にある他の HTML 要素に影響を与えずに、1 つのテキスト ノードだけを置き換える必要があります。そして、それを複数のノードに置き換える必要があります。

<div id="target"> foo / bar; baz<img src="/image.png"></div>

なる必要があります:

<div id="target"> <a href="#">foo</a> / <a href="#">bar</a>; <a href="#">baz</a><img src="/image.png"></div>

私は、jQuery がテキスト ノードをあまりサポートしていないことを知っています。jQuery の代わりに直接 DOM 呼び出しを使用できることはわかっています。$('#target').html(そして、私は自分の新しいもの+を変えたくないようなことをすることができることを知っています)。また、初期スペースを保持したいことに注意してください。これだけでは難しいようです。

ここで専門家に聞きたいのは、これを行うための最も慣用的な jQuery の方法はありますか?

4

3 に答える 3

10

基本的に、最初の子 (テキスト ノード) を新しいコンテンツに置き換えます。http://api.jquery.com/replaceWith/が必要です

// Text node we want to process and remove
var textNode = $("#target").contents().first();
// Break the text node up
var parts = textNode.text().split(/\s/);
// Put links around them
var replaceWith = "";
for (var i =0; i < parts.length;i++) {
    replaceWith += "<a href='http://www.google.com'>"  + escapeHTML(parts[i]) + "</a> ";
}
// Replace the text node with the HTML we created
textNode.replaceWith(replaceWith);

function escapeHTML(string) {
  return string.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="target">example, handles escaping properly, you should see an ampersand followed by "amp;" here: &amp;amp; <img src="/foobar.png"></div>

http://jsfiddle.net/NGYTB/1/

于 2012-10-12T04:01:00.963 に答える
1
于 2012-10-12T03:40:07.033 に答える
0

これを試してください..編集版

$('#target').html('<a href="#">mixed</a> text <a href="#">and</a> HTML' + $('#target').html());
于 2012-10-12T03:26:17.817 に答える