Добавление тегов стиля только вокруг определенных символов
Я пытаюсь добавить встроенный стиль только к числам в элементах абзаца. Например:
<p>This paragraph has the numbers 1 and 2 in it.</p>
Итак, в этом случае я бы хотел поставить <span class = "style">1</span> и <span class = "style">2</span>. Вокруг двух цифр в этом абзаце.
Я пытаюсь написать javascript для этого, поэтому мне не нужно возвращаться к документу, над которым я работаю, и вручную добавлять теги стиля вокруг каждого числа, так как документ очень длинный.
Пока это то, что я написал, но мне трудно понять, что делать на следующем шаге, как включить изменения обратно в HTML абзаца.
let regEx=/[0-9]/g;
let list = [];
let paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
let html = paragraphs[i].innerHTML;
list.push(html);
}
// all paragraphs into one string.
let joined = list.join(' ');
// all the numbers in the paragraphs stored in array
let numbers = joined.match(regEx);
// define array for styling edits
let edits = [];
// adding the styling tags to each num
numbers.forEach(function(num){
edits.push('<span class = "style">' + num + '</span>');
// outputs ["<span class='style'>3</span>", "<span class='style'>7</span>", "<span class='style'>4</span>", "<span class='style'>5</span>"]
});
// need to insert edits into paragraph html
Если кто-нибудь может предложить какие-либо предложения о том, как я мог бы достичь этого, это было бы здорово, я все еще относительно новичок в работе с JS.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вот новый код https://jsfiddle.net/fazanaka/au4jufrr/1/
var element = document.getElementById('text'),
text = element.innerText,
wordsArray = text.split(' '),
newString;
for(var i = 0; i < wordsArray.length; i++){
if (!isNaN(parseFloat(wordsArray[i])) && isFinite(wordsArray[i])){
wordsArray[i] = "<span class='style'>" + wordsArray[i] + "</span>";
}
}
newString = wordsArray.join(' ');
element.innerHTML = newString;
Я надеюсь это поможет тебе
UPD: По всем абзацам https://jsfiddle.net/fazanaka/qx2ehym4/
const paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
const regEx=/([0-9])/g;
const newHtml = paragraphs[i].innerHTML.replace(regEx, '<span class = "style">$1</span>');
paragraphs[i].innerHTML = newHtml;
}
Я обновил ваше регулярное выражение, чтобы поместить номер в группу, затем в строке replace вы можете ссылаться на эту группу, так как есть только одна, это будет $ 1. Как вы можете видеть при замене, мы оборачиваем его соответствующим диапазоном, а затем вставляем его обратно в innerHTML.
Я заметил, что ваше регулярное выражение захватывает только однозначные числа, если вы хотите фиксировать многозначные числа, вы можете обновить свой reg ex следующим образом: / ([0-9] +) / g.
Я создал простой jsfiddle, чтобы показать вам, как это работает: https://jsfiddle.net/andyorahoske/dd6k6ekp/35/
Я разбил наиболее фундаментальную часть этого на функцию многократного использования, которая может оказаться полезной в других контекстах.
/**
* Wraps numbers in a string with any provided wrapper.
* @param {String} str A string containing numbers to be wrapped.
* @param {String} wrapper A string with placeholder %s to define the wrapper. Example - <pre>%s</pre>
* @return {String} The original string with numbers wrapped using the wrapper param.
*/
function wrapNumbers(str, wrapper) {
var numbersInStr = str.match(/\d+/g) || [];
var chunks = [];
var segmentStart = 0;
for(var i = 0; i < numbersInStr.length; i += 1) {
var number = numbersInStr[i];
var indexOfNumber = str.indexOf(number);
var fWrapper = wrapper.replace('%s', number);
chunks.push(str.slice(segmentStart, indexOfNumber));
chunks.push(fWrapper);
segmentStart = indexOfNumber + number.length;
}
if (segmentStart < str.length) {
chunks.push(str.slice(segmentStart, str.length));
}
return chunks.join('');
}
Чтобы использовать это в вашем случае использования, это может выглядеть следующим образом:
var paragraphs = document.getElementsByTagName("p");
var wrapper = '<span class = "style">%s</span>';
for(var i = 0; i < paragraphs.length; i += 1) {
var paragraph = paragraphs[i];
paragraph.innerHTML = wrapNumbers(paragraph.innerHTML, wrapper);
}
Кодовое отверстие: https://codepen.io/bryceewatson/pen/vRqeVy?editors=1111
Спасибо! Это было именно то, что я искал для вас, и вы сделали код простым для понимания. Ваше здоровье!