Можно ли использовать функции jquery для простого преобразования строки в дерево, манипулирования узлом и преобразования обратно в строку?

Question

Можно ли использовать функции jquery для простого преобразования строки в дерево, манипулирования узлом и преобразования обратно в строку?

оригинальный вопрос: Как функции jquery, такие как селектор и .html (), используются для работы со строками?

Обновление:

• Я нашел соответствующую информацию на этот вопрос разобрать строку html с JQuery
• У Бена Алмана есть пример replaceText в качестве дополнения jquery который гуляет по дереву и заменяет Текст
• дополнительная информация из этого вопроса и ответа о том, как преобразовать объекты jquery в строки

Во-первых, можно ли использовать jquery для следующего? (Я проверю через минуту)

var b = $('<a href="#">bacon</a>').html(); 

делает b === 'бекон', ответ - да.

Как можно использовать jQuery для манипуляции со строками: (изменено с ответ на выделение образца )

var key = 'bacon';
var str = '<a href="#">bacon</a><a href="#">tastes great</a>';
$(str).contents().each(function() {
  var node = this;
  if (node.nodeType == 3) {
    var text = node.nodeValue;
    text = text.replace(new RegExp(key, "g"),
            '<span class="Someclass">'+key+'</span>'
        ));
    //replace existing node value with text
});
// convert tree into string

желаемый вывод - строка с измененными элементами:

str = '<a href="#"><span class="Someclass">bacon</span</a><a href="#">tastes great</a>';

Answer 1

Я бы сказал "не совсем".Конкретное изменение, которое вы пытаетесь внести, может быть сделано, как показано в Box9, но с точки зрения семантики, я бы сказал, что, насколько я знаю, вы не используете jQuery для работы со строками.

jQuery может использоваться для чтения и изменения DOM и существует частично, чтобы сделать этот процесс стандартным для всех браузеров.

Как только вы прочитали DOM, но перед тем, как обновить его, часть, в которой вы анализируете и изменяете ее, может быть выполнена путем манипулирования строками, но фактическая манипуляция со строками будет в простом Javascript.

Answer 2

Да, но вы хотите .html() вместо:

var b = $('<a href="#">bacon</a>').html();
// Or,
var b = $('<a href="#">bacon</a>')[0].innerHTML;

Что касается второго примера:

$('<a href="#">bacon</a>').html(function (i, oldHtml) {
    return oldHtml.replace(/(bacon)/g, '<span class="SomeClass">$1</span>');
});

Answer 3

Я уже несколько раз читал этот вопрос и соответствующие комментарии и ссылки, и я до сих пор не уверен, что это за вопрос, но ...

Можно ли легко использовать функции jquery преобразовать строку в дерево, манипулировать узел, и преобразовать обратно в строка

Да.

Хитрость заключается в использовании элемента-обертки и методов jQuery html () и text (). Вот скрипка , чтобы показать вам, что я имею в виду.

Иногда вам нужно использовать текст, чтобы получить весь текст в элементе, не захватывая все дочерние элементы, такие как перенос тегов или . После того, как это dom-элемент, вы можете использовать dom-манипуляции для добавления, добавления классов, изменения атрибутов и тому подобного, прежде чем возвращать его обратно в строку.

Это тот ответ, который вы искали?

РЕДАКТИРОВАТЬ: Doh! Получил ответ, когда я печатал

Answer 4

Получилось, используя replaceText Бена Алмана и объект в строку html конвертер взломать

function one() {
    var key = 'bacon';
    var str = '<a href="#">bacon nation</a> <a href="#">tastes good</a>';
    dump("before str contents: " + str);
    str = $(str).replaceText(new RegExp(key,"gi"),'<span class="SomeClass">' + key + '</span>');
    str = $('<div>').append($(str).clone()).remove().html();
    dump("after str contents: " + str);
}

и желаемый результат:

<a href="#"><span class="SomeClass">bacon</span> nation</a><a href="#">tastes good</a>

Я включил основной вызывающий HTML + скрипт для полноты

    <style type="text/css"> .SomeClass { background-color: yellow } </style>
    <script type="text/javascript">
        function dump(str) {
            $('<div>' + str + '<br/></div>').appendTo('body');
        }
    </script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.ba-replacetext.js"></script>
    <script type="text/javascript" src="test.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            one();
        });
    </script>