javascript — замените перенос одной буквы на элемент span, используя jquery.

Замените перенос одной буквы на элемент span, используя jquery

Вот решение в чистом JavaScript. Он длиннее других ответов, но в основном потому, что он также охватывает больше случаев, чем простой пример OP.

Я скомпилировал JSFiddle с некоторыми примерами, чтобы показать, как это работает. Скрипка использует небольшое изменение этого кода, что также позволяет указать элемент-оболочку.

Он в основном перемещается по дереву DOM с использованием стандартного API DOM и пытается найти первый текстовый узел. Текстовый узел проверяется с помощью регулярного выражения, чтобы убедиться, что в нем есть буква для переноса. Если нет, он перейдет к следующему текстовому узлу, пока не будет найден подходящий. Этот подход означает, что решение не зависит от базовой структуры HTML, но все же должно быть эффективным.

Вы можете легко адаптировать регулярное выражение по своему вкусу. Например, вы можете переносить символы, отличные от букв, [a-zA-Z] все первое слово ( [a-zA-Z] ), [a-zA-Z] определенное слово и т. Д.

 var wrapFirst = function(nodes, letters) { var rgx = new RegExp("^([\s\S]*?)("   letters   ")"); for (var i = 0; i {amp}lt; nodes.length;   i) { // 1) Find the first text node var root = nodes[i]; var n = root.firstChild; var txt; while (n) { // Text node? if (n.nodeType == Node.TEXT_NODE) { if ((txt = n.data.match(rgx))) { break; } // Non-text node with children? } else if (n.firstChild) { n = n.firstChild; continue; } // Has next sibling? if (n.nextSibling) { n = n.nextSibling; // Parent has next sibling? } else if (n.parentNode !== root) { n = n.parentNode.nextSibling; // Nothing useful found } else { n = undefined; } } // 2) Wrap the text if (n) { // Remove char from the old text n.data = n.data.substring(txt[0].length); // Add the span ( prefix if any) var p = n.parentNode; if (txt[1]) { p.insertBefore(document.createTextNode(txt[1]), n); } var wr = document.createElement("span"); wr.appendChild(document.createTextNode(txt[2])); p.insertBefore(wr, n); } } } wrapFirst( document.getElementsByClassName("first_ltr"), "[a-zA-Z]" ); 
 span { background: yellow; } 
 {amp}lt;div class="first_ltr"{amp}gt; {amp}lt;p{amp}gt;This is a Test {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; 

Для версии, которая использует jQuery, вы можете посмотреть предыдущую версию этого ответа (внизу, а не сломанный код вверху). Это дает тот же результат, но может быть немного менее эффективным (из-за jQuery, но также из-за необходимости делать больше общих проверок регулярных выражений).

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector