Разделение строки и перенос математических тегов в эту строку

#javascript #string

#javascript #строка

Вопрос:

У меня есть строка, содержащая математику. Мне нужно обернуть математические теги в промежуток и собрать строку обратно вместе. Я выполнил это для конкретного случая, но я ищу что-то гораздо более простое (если есть) и более эффективный способ добиться этого. Например, если перед тегом math есть текст, это не сработает, или если есть несколько математических тегов, это не сработает. Спасибо за любую помощь, которую вы можете оказать.

Строка

 <math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn><mo>amp;#xA0;</mo><msqrt><mn>34</mn></msqrt></math> I am text after the string.
  

Желаемая строка

 <span class="math math-inline"><math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn><mo>amp;#xA0;</mo><msqrt><mn>34</mn></msqrt></math></span> I am text after the string.
  

Решение пока

 let spanStart = '<span class="math math-inline">';
let spanEnd = '</span>';
let mathStart = '<math';
let mathEnd = '</math>';
let startPos = mathString.indexOf(mathStart);
let endPos = mathString.indexOf(mathEnd);

let output = mathString.substr(startPos, 0)   spanStart   mathStart   mathString.substr(mathStart.length, (endPos - mathStart.length))   mathString.substr(endPos, mathEnd.length)   spanEnd   mathString.substr((endPos   spanEnd.length));
  

Пока что я сделал перо, чтобы показать свое решение, но опять же, оно не будет работать постоянно.

Например, если бы:

 This is question 2 <math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn><mo>amp;#xA0;</mo><msqrt><mn>34</mn></msqrt></math> I am text after the string.
  

Это больше не было бы правильным. Спасибо за вашу помощь

Комментарии:

1. String.replace() . Замените начальный математический тег на "<math><span>..." , а конечный </math> — на </math></span>

2. О боже. Классический переосмыслитель здесь. Спасибо, что сработало. Ух ты, как же я этого не заметил.

Ответ №1:

Предполагая, что <math> тег находится внутри <body> . Используйте .innerHTML .

 var html = document.querySelector('body').innerHTML;
document.querySelector('body').innerHTML = `<span class='math math-inline'>${html}</span>`;  
 .math {font-family: consolas; font-style:italic; color:red}  
 <math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn><mo>amp;#xA0;</mo><msqrt><mn>34</mn></msqrt></math>  

Ответ №2:

Вот мое решение, основанное на комментарии @Lewsi

 function wrapMath (string) {
  if (typeof string !== 'string') return false
  if (!checkForMath(string)) return false

  const spanStart = '<span class="math math-inline">'
  const spanEnd = '</span>'

  return string.replace(/<math/g, spanStart   '<math').replace(/</math>/g, spanEnd)
}

let string = 'This is my string <math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn><mo>amp;#xA0;</mo><msqrt><mn>34</mn></msqrt></math> I am text after the string.
'

wrapMath(string)

// Output
'This is my string <span class="math math-inline"><math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn><mo>amp;#xA0;</mo><msqrt><mn>34</mn></msqrt></math></span> I am text after the string'