Trouver et remplacer des caractères de texte dans un document avec JS

Je me demandais si il y a une légère façon, je pouvais utiliser du JavaScript ou jQuery pour renifler un texte spécifique personnage à travers un document; dire € et de trouver toutes les occurrences de ce caractère. Et puis! Écrire une fonction permettant de remplacer toutes les occurrences de ce avec dit une $.

J'ai trouvé cet extrait de code pour commencer:

var str = 'test: &#39;';

str = str.replace(/&#39;/g, "'");

Essentiellement; je suis désireux d'une solution pour un document d'une page. Saisir toutes les instances de X et de le rendre XY. Seuls les caractères de texte.

Oui, il y a probablement un moyen de le faire, bien que la façon la plus simple permettrait également de supprimer tous les gestionnaires d'événements et les éléments de données à partir de votre page. $("body").html( $(body).html().replace(/\€/g,'$') ) c'est une mauvaise façon de faire.
Je vois. OK merci.
Si vous voulait éviter de perdre des événements et de l'élément de données, il devient beaucoup plus complexe.
Merci @KevinB, j'aime la chair davantage. Juste quelque chose que je suis curieux de savoir. Que pourrais-je ajouter, pour être plus précis?
La meilleure chose serait de le faire côté serveur, mais si ce n'est pas une option, côté client, vous devez sélectionner tous les nœuds de texte dans le document, effectuer une itération sur eux, puis de réaliser les remplacer sur chaque nœud de texte individuellement.
Voici un échantillon à l'aide d'un plugin, j'ai écrit un tout à l'arrière pour mettre du texte en surbrillance. jsfiddle.net/2t8TV/1 je l'ai utilisé pour envelopper toutes les occurrences de € avec une plage, puis j'ai remplacé le texte à l'intérieur de ces travées.

InformationsquelleAutor Captain Ron | 2013-09-05

25

Comment à ce sujet, en remplacement de @ avec $:
```
$("body").children().each(function () {
    $(this).html( $(this).html().replace(/@/g,"$") );
});
```
http://jsfiddle.net/maximua/jp96C/1/
- L'ajout de i à la regex va vous donner une casse de recherche si vous êtes le remplacement de caractères alpha .replace(/soMeWord/gi,"Another Word"));
- cela peut modifier le code HTML ainsi que du texte: jsfiddle.net/jp96C/498
- bonne prise, y compris les espaces avant et après m'a permis de réduire cette chance
InformationsquelleAutor Max Malyk

Ma propre suggestion est comme suit:

function nativeSelector() {
    var elements = document.querySelectorAll("body, body *");
    var results = [];
    var child;
    for(var i = 0; i < elements.length; i++) {
        child = elements[i].childNodes[0];
        if(elements[i].hasChildNodes() && child.nodeType == 3) {
            results.push(child);
        }
    }
    return results;
}

var textnodes = nativeSelector(),
    _nv;
for (var i = 0, len = textnodes.length; i<len; i++){
    _nv = textnodes[i].nodeValue;
    textnodes[i].nodeValue = _nv.replace(/£/g,'€');
}

JS Fiddle démo.

La nativeSelector() fonction provient de une réponse (posté par Anurag) à cette question: getElementsByTagName() équivalent pour textNodes.

+1 pour ne pas jquerying la réponse

InformationsquelleAutor David Thomas

11

ECMAScript 2015+ approche

Les pièges lors de la résolution de cette tâche

Cela semble comme une tâche facile, mais vous devez prendre soin de plusieurs choses:
- Simplement remplacer l'ensemble de l'HTML tue tous les DOM fonctionnalités, comme les écouteurs d'événement
- De remplacer le code HTML peut également remplacer <script> ou <style> contenu, ou des balises HTML ou des attributs, qui n'est pas toujours souhaité
- De changer le code HTML peut entraîner une xss attaque
- Vous voudrez peut-être remplacer les attributs tels que la title et alt (de manière contrôlée) ainsi
Protection contre xss les attaques ne peuvent pas être résolus en utilisant les méthodes ci-dessous. E. g. si un fetch appel lit une URL à partir de quelque part sur la page, puis envoie une requête à cet URL, les fonctions ci-dessous ne s'arrêtera pas que, depuis ce scénario est dangereuse en soi.

De remplacer le contenu de texte de tous les éléments

En fait cela sélectionne tous les éléments qui contiennent du texte normal, qui leur passe par les nœuds enfants — parmi ceux-ci sont aussi des nœuds de texte —, cherche à celles des nœuds de texte et remplace leur contenu.

Vous pouvez éventuellement spécifier un autre racine target, par exemple replaceOnDocument(/€/g, "$", { target: someElement });; par défaut, le <body> est choisi.
```
const replaceOnDocument = (pattern, string, {target = document.body} = {}) => {
  //Handle `string` — see the last section
  [
    target,
    ...target.querySelectorAll("*:not(script):not(noscript):not(style)")
  ].forEach(({childNodes: [...nodes]}) => nodes
    .filter(({nodeType}) => nodeType === document.TEXT_NODE)
    .forEach((textNode) => textNode.textContent = textNode.textContent.replace(pattern, string)));
};

replaceOnDocument(/€/g, "$");
```
Remplacer les nœuds de texte, les éléments, les attributs et les propriétés

Maintenant, c'est un peu plus complexe: il faut vérifier trois cas: si un nœud est un texte nœud, si c'est un élément et de son attribut doit être remplacé, ou si c'est un élément et de son propriété doit être remplacé. Un replacer objet fournit des méthodes pour les nœuds de texte et des éléments.

Avant de remplacer des attributs et des propriétés, la poudre doit vérifier si l'élément possède un attribut correspondant; sinon, de nouveaux attributs créés, considérée comme indésirable. Il doit également vérifier si le ciblées propriété est une chaîne de caractères, puisque seules des chaînes de caractères peut être remplacé, ou si la mise en correspondance de la propriété de la cible de l'attribut n'est pas une fonction, car cela peut conduire à un xss attaque.

Dans l'exemple ci-dessous, vous pouvez voir comment utiliser les fonctionnalités étendues: dans le troisième argument optionnel, vous pouvez ajouter un attrs de la propriété et un props de la propriété, qui est un objet iterable (par exemple un tableau) chacune, pour les attributs pour être remplacé et les propriétés d'être remplacés, respectivement.

Vous remarquerez également que cet extrait utilise flatMap. Si ce n'est pas pris en charge, utilisez un polyfill ou de la remplacer par l' reduce–concat, ou map–reduce–concat construire, comme on le voit dans les liens de la documentation.
```
const replaceOnDocument = (() => {
const replacer = {
[document.TEXT_NODE](node, pattern, string){
node.textContent = node.textContent.replace(pattern, string);
},
[document.ELEMENT_NODE](node, pattern, string, {attrs, props} = {}){
attrs.forEach((attr) => {
if(typeof node[attr] !== "function" && node.hasAttribute(attr)){
node.setAttribute(attr, node.getAttribute(attr).replace(pattern, string));
}
});
props.forEach((prop) => {
if(typeof node[prop] === "string" && node.hasAttribute(prop)){
node[prop] = node[prop].replace(pattern, string);
}
});
}
};
return (pattern, string, {target = document.body, attrs: [...attrs] = [], props: [...props] = []} = {}) => {
//Handle `string` — see the last section
[
target,
...[
target,
...target.querySelectorAll("*:not(script):not(noscript):not(style)")
].flatMap(({childNodes: [...nodes]}) => nodes)
].filter(({nodeType}) => replacer.hasOwnProperty(nodeType))
.forEach((node) => replacer[node.nodeType](node, pattern, string, {
attrs,
props
}));
};
})();
replaceOnDocument(/€/g, "$", {
attrs: [
"title",
"alt",
"onerror" //This will be ignored
],
props: [
"value" //Changing an `<input>`’s `value` attribute won’t change its current value, so the property needs to be accessed here
]
});
```
Remplacement par des entités HTML

Si vous avez besoin pour le faire fonctionner avec des entités HTML comme , les approches ci-dessus va littéralement produire de la chaîne , puisque c'est un HTML entité et ne fonctionne que lors de l'attribution .innerHTML ou à l'aide de méthodes connexes.

Donc, nous allons le résoudre en passant par la chaîne d'entrée à quelque chose qui accepte une chaîne HTML: un nouveau temporaire HTMLDocument. Il est créé par le DOMParser’s parseFromString méthode; à la fin, nous avons lu son documentElement’s textContent:
```
string = new DOMParser().parseFromString(string, "text/html").documentElement.textContent;
```
Si vous souhaitez utiliser cette fonction, choisissez l'une des méthodes ci-dessus, en fonction de si oui ou non vous voulez remplacer le HTML attributs et des propriétés DOM, en plus du texte; il suffit ensuite de remplacer le commentaire //Handle `string` — see the last section par la ligne ci-dessus.

Maintenant, vous pouvez utiliser replaceOnDocument(/Güterzug/g, "Güterzug");.

NB: Si vous n'utilisez pas la chaîne de la manipulation de code, vous pouvez également supprimer le { } autour de la flèche corps de la fonction.

Noter que cette analyse entités HTML, mais encore interdit l'insertion réelle des balises HTML, puisque nous sommes seulement en lecture le textContent. C'est également protégé contre la plupart des cas, de xss: puisque nous l'utilisons parseFromString et la page de document n'est pas touché, pas de <script> est téléchargé et pas de onerror gestionnaire est exécuté.

Vous devriez également envisager l'utilisation de \xAD au lieu de  directement en JavaScript de votre chaîne, si elle s'avère à être plus simples.
- Ressemble beaucoup à lui-même, mais j'ai besoin de remplacer les mots avec les mêmes mots doux avec des traits d'union inséré. C'est à cause des erreurs faites par le CSS de césure fonction avec certains mots néerlandais. Et puis, votre fonction, le navigateur de rendu: Lorem et ipsum (Latin exemples). Vous n'arrive pas à savoir comment le résoudre, vous?
- Maintenant, voir mon edit; il devrait fonctionner...
- Merci! Vous aviez déjà m'ont mis sur la bonne voie, celle de innerHTML. Je suis en train de travailler sur un autre chemin, et fera Tripote les deux. Ainsi, nous pouvons voir lequel est le plus rapide et le plus facile à maintenir pour la prochaine web dev. Arnold dit: "je vais être de retour. 😉
- Hier bin ich wieder. En fait, je ne sais pas vraiment comment des scripts de test pour la vitesse. Je peux imaginer quelque chose, mais c'est tout. Cependant, je suis venu avec une simple fourche de script que vous pouvez remplacer par d'autres mots, et peut insérer des entités HTML. Voir jsfiddle.net/FrankConijn/t1e0k2fx/4. Déplacer le centre de la barre de défilement de la barre vers la droite, la réduction du champ de sortie, et de voir que le mot "medewerkerstevredenheidsonderzoek' tire un trait d'union.
- Bien que cette solution utilise innerHTML de remplacement qui a le problème de l'annulation écouteurs d'événement...
- Je sais ce que les écouteurs d'événement, mais n'arrive pas à voir exactement ce que vous voulez dire. Pouvez-vous donner un petit exemple?
- Voir Est-il possible de joindre à innerHTML sans détruire des descendants des écouteurs d'événement?. Fondamentalement, body.children[someChild].addEventListener(someEvent, someListener); puis body.innerHTML += someAdditionalContent; ou body.innerHTML = someNewContent; sérialise et re-traite la totalité de HTML, de compensation hors tout précédemment liés à l'écouteur d'événement. C'est pourquoi, dans mon approche, j'ai soigneusement remplacer le contenu de ses différents nœuds de texte.
- Intéressant. Ne le savais pas, donc merci pour l'avertissement. Néanmoins, il y a plusieurs facile des solutions de contournement pour le problème de la destruction des écouteurs d'événement: 1. Dans le cas de (en outre) pages statiques: ajouter des écouteurs d'événements dernière. 2. Sur la page liée, il existe plusieurs solutions pour les pages avec altération de balisage. À laquelle j'ai ajouté un simple: stackoverflow.com/a/51054276/2056165.
InformationsquelleAutor Sebastian Simon
2

En javascript sans utiliser jquery:
```
document.body.innerText = document.body.innerText.replace('actualword', 'replacementword');
```
- Sans l'aide d'une regex, avec la g commutateur/modificateur, qui ne fera que remplacer la première occurrence de la "actualword'.
- Merci de faire une démo pour montrer que cela fonctionne. Dans mon test, il ne veut pas faire une chose,
- En effet, pour définir la innerText, ce qui n'est pas indiqué dans la réponse. document.body.innerText = document.body.innerText.replace('actualword', 'replacementword')...
InformationsquelleAutor sohail.hussain.dyn
1

Pour chaque élément à l'intérieur du document body modifier leur texte à l'aide de .texte(fn) fonction.
```
$("body *").text(function() {
return $(this).text().replace("x", "xy");
});
```
- Cette vis jusqu'à l'HTML si.
InformationsquelleAutor letiagoalves

Le mieux serait de le faire côté serveur ou enveloppez-les symboles de devise à un élément, vous pouvez sélectionner avant de les renvoyer au navigateur, mais si ni est une option, vous pouvez sélectionner tous les nœuds de texte dans le corps et de faire le remplacer sur eux. Ci-dessous, je suis en train de faire cela à l'aide d'un plugin que j'ai écrit il y a 2 ans qui avait été préparée pour la mise en évidence de texte. Ce que je suis en train de faire est de trouver toutes les occurrences d'euros et en l'enveloppant dans un span avec la classe de la monnaie-symbole, alors je suis en remplaçant le texte de ces travées.

Démo

(function($){
$.fn.highlightText = function () {
//handler first parameter
//is the first parameter a regexp?
var re,
hClass,
reStr,
argType = $.type(arguments[0]),
defaultTagName = $.fn.highlightText.defaultTagName;
if ( argType === "regexp" ) {
//first argument is a regular expression
re = arguments[0];
}       
//is the first parameter an array?
else if ( argType === "array" ) {
//first argument is an array, generate
//regular expression string for later use
reStr = arguments[0].join("|");
}       
//is the first parameter a string?
else if ( argType === "string" ) {
//store string in regular expression string
//for later use
reStr = arguments[0];
}       
//else, return out and do nothing because this
//argument is required.
else {
return;
}
//the second parameter is optional, however,
//it must be a string or boolean value. If it is 
//a string, it will be used as the highlight class.
//If it is a boolean value and equal to true, it 
//will be used as the third parameter and the highlight
//class will default to "highlight". If it is undefined,
//the highlight class will default to "highlight" and 
//the third parameter will default to false, allowing
//the plugin to match partial matches.
//** The exception is if the first parameter is a regular
//expression, the third parameter will be ignored.
argType = $.type(arguments[1]);
if ( argType === "string" ) {
hClass = arguments[1];
}
else if ( argType === "boolean" ) {
hClass = "highlight";
if ( reStr ) {
reStr = "\\b" + reStr + "\\b";
}
}
else {
hClass = "highlight";
}
if ( arguments[2] && reStr ) {
reStr = reStr = "\\b" + reStr + "\\b";
} 
//if re is not defined ( which means either an array or
//string was passed as the first parameter ) create the
//regular expression.
if (!re) {
re = new RegExp( "(" + reStr + ")", "ig" );
}
//iterate through each matched element
return this.each( function() {
//select all contents of this element
$( this ).find( "*" ).andSelf().contents()
//filter to only text nodes that aren't already highlighted
.filter( function () {
return this.nodeType === 3 && $( this ).closest( "." + hClass ).length === 0;
})
//loop through each text node
.each( function () {
var output;
output = this.nodeValue
.replace( re, "<" + defaultTagName + " class='" + hClass + "'>$1</" + defaultTagName +">" );
if ( output !== this.nodeValue ) {
$( this ).wrap( "<p></p>" ).parent()
.html( output ).contents().unwrap();
}
});
});
};
$.fn.highlightText.defaultTagName = "span";
})( jQuery );
$("body").highlightText("€","currency-symbol");
$("span.currency-symbol").text("$");

Évidemment, ce serait horriblement inefficace pour ce faire sur l'élément de corps sur un grand site web, par conséquent vous devez remplacer "corps" avec un sélecteur qui permet de sélectionner toutes les zones où ce symbole peut se produire.

InformationsquelleAutor Kevin B

1

Utiliser split et join méthode
```
$("#idBut").click(function() {
$("body").children().each(function() {
$(this).html($(this).html().split('@').join("$"));
});
});
```
ici est solution
- En fait, c'est la meilleure solution. Parce que dans une autre solutions que vous ne pouvez pas le faire de façon dynamique
- Ce n'est pas la meilleure solution. Il remplace les DOM et détruit tous les écouteurs d'événements.
InformationsquelleAutor Suresh Mahawar

Similaire à @max-malik réponse, mais sans l'aide de jQuery, vous pouvez également le faire à l'aide de document.createTreeWalker:

JS:

button.addEventListener('click', e => {
const treeWalker = document.createTreeWalker(document.body);
while (treeWalker.nextNode()) {
const node = treeWalker.currentNode;
node.textContent = node.textContent.replace(/@/g, '$');
}
})

HTML:

<div>This is an @ that we are @ replacing.</div>
<div>This is another @ that we are replacing.</div>
<div>
<span>This is an @ in a span in @ div.</span>
</div>
<br>
<input id="button" type="button" value="Replace @ with $" />

InformationsquelleAutor Jsilvermist

0
```
str.replace(/replacetext/g,'actualtext')
```
Le présent document remplace toutes les instances de replacetext avec actualtext
- L'auteur a voulu "flairer un texte spécifique personnage à travers un document" non seulement dans une chaîne de caractères
- à partir de la question.. je pense que c'est clair que le sniffing partie est fait & la "str" valeur a été extraite.
- non, il n'est pas: >>Essentiellement; je suis désireux d'une solution pour un document d'une page. Saisir toutes les instances de X et de le rendre XY. Seuls les caractères du texte.<<
InformationsquelleAutor Krishna
0

Vous pouvez utiliser:
```
str.replace(/text/g, "replaced text");
```
- Cela fonctionne avec des chaînes/texte? Le API docs pour replaceAll() l'indique, il est utilisé pour remplacer un ensemble d'éléments avec un autre élément.
- David a raison, replaceAll remplace les éléments, pas le contenu
- Vous avez raison, je ne savais même pas que. Mais dans ce cas, cela devrait vous aider: stackoverflow.com/questions/13574980/...
- Édité réponse avec la regex trop. Testé et de travail.
InformationsquelleAutor Praxis Ashelin
0

Que vous serez à l'aide de jQuery, de toute façon, essayez:

https://github.com/cowboy/jquery-replacetext

Puis il suffit de faire
```
$("p").replaceText("£", "$")
```
Il semble faire du bon travail de remplacement de texte et de ne pas jouer avec les autres éléments

InformationsquelleAutor James

Je pense que vous pouvez peut-être avoir à y penser cela.

Mon approche est simple.

Joignez-vous à la page avec une balise div:

<div id="mydiv">
<!-- you page here -->
</div>

Dans votre javascript:

var html=document.getElementById('mydiv').innerHTML;
html = html.replace(/this/g,"that");
document.getElementById('mydiv').innerHTML=html;

InformationsquelleAutor Joe Bonds

Vous devez vous connecter pour publier un commentaire.

ECMAScript 2015+ approche

Les pièges lors de la résolution de cette tâche

De remplacer le contenu de texte de tous les éléments

Remplacer les nœuds de texte, les éléments, les attributs et les propriétés

Remplacement par des entités HTML