Как обернуть первое слово в строку, не оборачивая элементы HTML в Javascript?

Question

Я хочу обернуть первое слово в строку, например:

var html = '<br> <br> Hello world!';

У меня есть следующий код:

html.replace(/^\s*\w+/, '<div class="underline">$&</div>');

Это выведет:

<div class="underline"><br></div> <br> Hello world!

Как я могу игнорировать теги HTML, чтобы вывод был таким, когда первое слово «Hello» обернуто в DIV?:

<br> <br> <div class="underline">Hello</div> world!

Answer 1

Вы можете использовать DOMParser для создания документа из строки, затем просмотреть текстовые узлы в документе, чтобы найти тот, чей усеченный текст не является пустой строкой. Замените этот узел на <div class="underline">:

Answer 2

Попробуйте это

html.replace(/[^< ][A-Za-z]+[^> ]/, '<div class="underline">$&</div>');

или

html.replace(/([^< ][A-Za-z]+[^> ])/, '<div class="underline">$1</div>');

Для справки, та же функция в команде sed:

echo '<br> <br> Hello world!' | sed -e 's/\([^< ][A-Za-z]\+[^> ]\)/<div class="underline">\1<\/div>/'

Для поддержки одного символа тела,

html.replace(/([^<][A-Za-z]+[^>])/, '<div class="underline">$1</div>');

Хотя, если тег html имеет некоторые атрибуты, такие как <p class="classname">, он не будет работать. DOMParser будет необходим вместо regex или, проконсультируйтесь this topi c.