Ajout de balises de style autour de caractères spécifiques uniquement

Question

J'essaie d'ajouter un style en ligne uniquement aux nombres dans les éléments de paragraphe. Par exemple:

<p>This paragraph has the numbers 1 and 2 in it.</p>

Donc, dans ce cas, je voudrais mettre <span class="style">1</span> et <span class="style">2</span>. Autour des deux chiffres de ce paragraphe.

J'essaie d'écrire un javascript pour accomplir cela, donc je n'ai pas besoin de revenir dans le document sur lequel je travaille et d'ajouter manuellement les balises de style autour de chaque numéro, car le document est très long.

Jusqu'à présent, c'est ce que j'ai écrit, mais j'ai du mal à savoir quoi faire pour la prochaine étape sur la façon de réintégrer les modifications dans le paragraphe 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

Si quelqu'un peut offrir des suggestions sur la façon dont je pourrais accomplir cela, ce serait formidable, je suis encore relativement nouveau pour travailler avec JS.

javascript html

1

Brian Williams 14 avril 2018 à 21:49

Answer 1

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;
}

J'ai mis à jour votre expression régulière pour mettre le nombre dans un groupe, puis dans la chaîne de remplacement, vous pouvez référencer ce groupe, car il n'y en a qu'un, ce sera 1 $. Comme vous pouvez le voir dans le remplacement, nous l'enveloppons avec l'étendue appropriée, puis nous le rebranchons directement dans le innerHTML.

J'ai remarqué que votre expression régulière ne capture que des nombres à un chiffre, si vous vouliez capturer des nombres à plusieurs chiffres, vous pouvez mettre à jour votre reg ex comme ceci: / ([0-9] +) / g.

J'ai créé un simple jsfiddle pour vous montrer comment cela fonctionne: https://jsfiddle.net/andyorahoske/dd6k6ekp / 35 /

2

andy729 14 avril 2018 à 19:56

Answer 2

Voici un nouveau code 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;

J'espère que ça t'aide

UPD: Pour tous les paragraphes https://jsfiddle.net/fazanaka/qx2ehym4/

0

Dmitriy Panov 14 avril 2018 à 20:07

Answer 3

J'ai éclaté la partie la plus fondamentale de cela en une fonction réutilisable que vous pourriez trouver utile dans d'autres contextes.

/**
 * 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('');
}

Pour l'utiliser dans votre cas d'utilisation, cela pourrait ressembler à ceci:

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);
}

Codepen: https://codepen.io/bryceewatson/pen/vRqeVy?editors=1111

1

Bryce W 14 avril 2018 à 21:01

Ajout de balises de style autour de caractères spécifiques uniquement

3 réponses

Questions connexes

De nouvelles questions

javascript