Переменная внутри строки внутри строки

89
12

У меня возникает небольшая проблема, когда я пытаюсь поместить переменную внутри строки, которая уже находится внутри строки. В основном, я пытаюсь изменить цвет определенного слова с помощью цветовой переменной (строка, например "# FF0"). Это выглядит так:

$('#textWithTheWord').replaceWith($('<div></div>').append($('#textWithTheWord').clone()).html().replace(word, '<span style="color:red;">' + word + '</span>'));

Обратите внимание, что я хочу заменить "красный" в '<span style="color:red;">' с этой переменной. Заранее спасибо!

спросил(а) 2021-01-25T17:39:50+03:00 4 месяца, 4 недели назад
1
Решение
76

Легким решением было бы просто заменить свойство innerHTML вашего элемента новой строкой html, которая бы обернула слова в span. Однако это не очень гибкое решение, поскольку, заменив свойство innerHTML, все элементы будут обновлены и могут дать неожиданные результаты, если вы не нацелите элементы, содержащие только текстовые узлы.

Предположим, что body содержит этот текст:

this is some text and I want to replace the word cool

Вы могли бы:

var $body = $(document.body);

$body.html($body.html().replace(/\b(cool)\b/g, '<span style="color: red;">$1</span>'));

Здесь /\b(cool)\b/g regex будет соответствовать всем классным словам и создать на них группу захвата, что позволит нам ссылаться на него в заменяющем выражении как $1.

Тем не менее, наиболее продвинутое решение, вероятно, может быть реализовано, например:

    Loop над текстовыми узлами, не содержащимися в пределах span который имеет атрибут data-styled-text. (вы можете проверить свойство textNode.parentNode) Добавьте слова, которые вы хотите использовать <span data-styled-text>. Посмотрите на https://developer.mozilla.org/fr/docs/DOM/Text.splitText Запросите все элементы <span data-styled-text> и выполните любые манипуляции, которые вы хотите с ними.

Я поиграл с этой концепцией, и я создал для вас скрипку, которая показывает, как вы можете манипулировать текстом любым способом, с помощью regex для задания определенного текста. Я создал две основные функции wrapText и styleText, которые позволят вам делать все, что хотите, с текстом на странице. Это может быть еще более оптимизировано, но вы получите эту идею.

Взгляните на http://jsfiddle.net/scarsick/tX4Ge/1/

Следующая функция позволяет обернуть любой текст в текстовый узел.

function wrapText(textNode, textRx, wrapFn) {
var global = textRx.global,
wrapEl,
result,
rightTextNode,
matchedText,
index;

while (result = textRx.exec(textNode.nodeValue)) {
rightTextNode = textNode.splitText(index = result.index);
rightTextNode.nodeValue = rightTextNode.nodeValue.substring((matchedText = result[0]).length);
wrapEl = wrapFn(matchedText, index);
wrapEl.appendChild(document.createTextNode(matchedText));
rightTextNode.parentNode.insertBefore(wrapEl, rightTextNode);

if (!global) {
break;
}

textNode = rightTextNode;
textRx.lastIndex = 0;
}
}

Следующая функция позволяет вам стирать любой текст, содержащийся внутри элемента.

function styleText(el, textRx, styleFn) {
var wrapEl = document.createElement('span'),
slice = [].slice;

wrapEl.setAttribute('data-styled-text', 'true');

styleText = function(el, textRx, styleFn) {
var childNodes = slice.call(el.childNodes, 0),
i = 0,
len = childNodes.length,
node;

for (; i < len; i++) {
node = childNodes[i];

switch (node.nodeType) {
case 3:
if (!node.parentNode.getAttribute('data-styled-text')) {
wrapText(node, textRx, function (text, index) {
var el = wrapEl.cloneNode();

styleFn(el, text, index);

return el;
});

continue;
}

styleFn(node.parentNode);
break;
case 1:
styleText(node, textRx, styleFn);
break;
}
}
};

styleText(el, textRx, styleFn);
}

ответил(а) 2021-01-25T17:39:50+03:00 4 месяца, 4 недели назад
45

Если весь этот код существует только для изменения цвета текста в элементе, вы можете упростить его так:

var color = "#ff8877";
$('#textWithTheWord').css('color', color);

http://api.jquery.com/css/

Там нет необходимости играть с DOM или конкатенацией строк для изменения атрибутов или стилизации элемента. Вероятно, у jQuery есть функция, которая уже делает то, что вы хотите.

ответил(а) 2021-01-25T17:39:50+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема