Замена некоторых внутренних текстов в строке HTML классом span и публикация обратно в DOM

Question

У меня есть строка HTML (не элемент DOM), например:

  <p>This is a sample dataa<p>
  <img src="Randomz" alt="Randomz Image">Randomz is the name of the image</img>

Мне нужно добавить <span class="spellerror"></span> к словам, которые имеют проблемы, и что тоже нужно проверять только текстовое содержимое идобавлено.

  <p>This is a sample dataa<p>
  <img src="Randomz" alt="Randomz Image"><span class="spellerror"> Randomz </span> is the name of the image</img>  

Моя проблема в том, что это смесь HTML и регулярных выражений.Возможно ли:

1. Сделать этот элемент DOM и затем работать с ним?
2. Или есть способ регулярного выражения для достижения этой цели.

Я не хочу трогать атрибуты, и если я изменяю текстовое содержимое, как я могу опубликовать его обратно ... потому что мне нужно вставить туда какой-то HTML.

Answer 1

Мне не нравится это решение, но оно работает:

'<img src="Randomz" alt="Randomz Image">Randomz is the name of the image</img>'
    .match(/<[^>]+>|[^<]+|<\/[^>]+>/g)
    .map(function (text, index) {
        if (index === 1) {
            return text.replace(/(Randomz)/, '<span class="spellerror">$1</span>');
        } else {
            return text;
        }
    })
    .join('');

Регулярное выражение распадается на открывающий тег, innerText, закрывающий тег.Затем перебирает все элементы, если это innerText, он заменяет нужный текст. Затем присоединяется.

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

Answer 2

Используйте некоторую форму шаблонов:

String.prototype.template = String.prototype.template ||
        function (){
            var  args = Array.prototype.slice.call(arguments)
                ,str = this
            ;
            function replacer(a){
                var aa = Number(a.substr(1))-1;
                return args[aa];
            }
            return  str.replace(/(\$\d+)/gm,replacer);
 };
 var thestring = [ '<p>This is a sample dataa</p><img src="Randomz"'
                  ,' alt="Randomz Image">$1Randomz$2 '
                  ,'is the name of the image</img>'].join('')
    ,nwString = theString.template('<span class="spellerror">','</span>');