Develop Reference

javascript- replace text with part of the file name

I'm trying to create a script in adobe illustrator that will check if a file name contains "ph" +5 numbers.
If it has been found then it will replace a part of a text with the match from the file name.
This is what I have so far I just can't get it to work, the text is replaced with "null"
var doc = app.activeDocument;
var name = doc.name;
var match = name.match(/ph\d{5}/);
for (i = 0; i < doc.textFrames.length; i++)
{
doc.textFrames[i].contents = doc.textFrames[i].contents.replace(/ph00000/gi, match);
}

I'd try this:
var doc = app.activeDocument;
var match = doc.name.match(/ph\d{5}/);
if (match != null) {
for (i = 0; i < doc.textFrames.length; i++) {
doc.textFrames[i].contents = doc.textFrames[i].contents.replace(/ph00000/gi, match[0]);
}
}

You can encapsulate the text that you want to replace with group constructs, and since you're using String.prototype.replace, you can capture the parenthesized group and pass the callback function as the 2nd argument in your .replace function.
Read more about it here
Example:
const textString = "This is ph54321 or ph12345";
const newString1 = textString.replace(/(ph)\d{5}/gi, function (matches, p1) {
return p1 + "appended"; // "This is phappended or phappended"
});
const newString2 = textString.replace(/ph(\d{5})/gi, function (matches, p1) {
return "BIGPH" + p1; // "This is BIGPH54321 or BIGPH12345"
});
console.log({newString1});
console.log({newString2});

How to dynamically add <a> tags given an index of HTML page's string?

I'm making a search function for my website. So far, I've found the string the user searches for in the whole website, and I'm able to print the string and the context of the string. I have achieved this by using $.get on my HTML pages, then stripping the HTML to leave the pure text I want to search in. I then find the index of the string I'm looking for, then use substr to find the context of the input string (a few indexes ahead and behind).
Now, I need to link to the original page when a user clicks on a search result. My research says to use <a> tags, but how do I dynamically insert those into the HTML page with the index I have? And the index I have isn't even the complete page; it's stripped of tags.
These are the relevant parts of my code:
JavaScript:
function getIndicesOf(searchStr, str) { //get the indices of searchStr inside of str
var searchStrLen = searchStr.length;
if (searchStrLen == 0) {
return [];
}
var startIndex = 0, index, indices = [];
str = str.toLowerCase();
searchStr = searchStr.toLowerCase();
while ((index = str.indexOf(searchStr, startIndex)) > -1) {
indices.push(index);
startIndex = index + searchStrLen;
}
return indices;
}
function search() {
obj=document.getElementById("searchButton");
obj.onclick = function() {
var searchInput = document.getElementById('searchBox').value;
var allPageContent = ['chap/telem.php', 'chap/nestor.php', 'chap/aeolus.php', 'chap/calypso.php', 'chap/circe.php', 'chap/cyclops.php', 'chap/eumaeus.php', 'chap/hades.php','chap/ithaca.php', 'chap/lestry.php', 'chap/lotus.php', 'chap/nausicaa.php', 'chap/oxen.php', 'chap/penelope.php', 'chap/proteus.php', 'chap/scylla.php', 'chap/sirens.php', 'chap/wrocks.php']; //contains all text
var allText = '';
for (var i = 0; i < allPageContent.length; i++){
$.get(allPageContent[i], function(data){
var div = document.createElement("div");
div.innerHTML = data;
//allText = div.textContent || div.innerText || ""; //gets the text to search in, stripped of html
alltext = data;
allText = allText.replace(/(\r\n\t|\n|\r\t)/gm," ");
console.log(data);
var indices = getIndicesOf(searchInput, allText); //the variable indices is the array that contains the indices of the searched text in the main text
indices.forEach(findContext);
})
}
localStorage.output = '';
function findContext(currentValue, index) {
if (currentValue <= 16) {
searchContext = "..." + allText.substr(currentValue, 100) + "...";
} else {
searchContext = "..." + allText.substr(currentValue-15, 100) + "...";
}
localStorage.output = localStorage.output + searchContext + "<br /><br />";
}
console.log(localStorage.output);
};
};
HTML:
<script>document.getElementById("output").innerHTML = localStorage.output;</script>

It's a bit confusing what you're trying to achieve, considering your HTML, but replying to this
My research says to use <a> tags, but how do I dynamically insert
those into the HTML page with the index I have?
this would do the trick
var output = document.getElementById("output");
var a = document.createElement("a");
var linkText = document.createTextNode("my linked text");
a.appendChild(linkText);
a.href = "http://example.com";
output.appendChild(a);

How to add span elements within text node (document.createTextNode('...')) in JS?

I know that document.createTextNode(text) in JS is for creating text only, but is there a way to insert into it two span elements?
I have two spans created like this:
/*
* span with wrong (old) medical word
*/
// Replacement node
var span_old = $('<span />', {
'class': pluginName + '-autoword-highlight wrong wrong-medical-word-'+i
});
// If we have a new match
if (i !== c) {
c = i;
replaceElement = span_old;
}
span_old
.text(fill)
.data({
'firstElement': replaceElement,
'word': oldWord
});
/*
* span with new - corrected medical word
*
*/
// Replacement node
var span_new = $('<span />', {
'class': pluginName + '-autoword-highlight corrected-medical-word-'+i
});
// If we have a new match
if (i !== c) {
c = i;
replaceElement = span_new;
}
span_new
.text(replaceFill)
.data({
'firstElement': replaceElement,
'word': replaceFill
});
var wrong_and_corrected_medical_text = span_old[0] + span_new[0];
return document.createTextNode(wrong_and_corrected_medical_text);
Expected result is
old text - new text
and I need to return Text Node as always. Is there a hack to stringify the span elements or other way? Thanks!

Is this what you need?
var wrong_and_corrected_medical_text = span_old.text() + span_new[0].text();
Edit:
So you need the html to be returned as text, Please try this.
var wrong_and_corrected_medical_text = span_old.prop('outerHTML') + span_new.prop('outerHTML');
Reference:
https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

Javascript. It is possible to add id on splitted word?? using word.split("")

var wtc = document.getElementById("sw").value;
var cw = wtc.split("").join(' ');
cw.toString();
var x=document.getElementById("demo");
x.innerHTML=cw;
I have this code. how can i add id to the splitted(am i right on my term??) word.. it is possible?
I want is to add id on each letter that is splited. I dont know the exact number of letter because it's depend on the user's inputted word.
for example. i have this word from split.
[W][O][R][M]
i want it to be something it this. or anything that have an id :)
<div id="DIVtext1">W</div>
<div id="DIVtext2">O</div>
<div id="DIVtext3">R</div>
<div id="DIVtext4">M</div>
Thanks!

do you mean something like:
var word = "WORM".split("");
var demoEle = document.getElementById("demo");
for(var w = 0, len = word.length; w < len; w++) {
var divEle = document.createElement("div");
divEle.id = "DIVtext"+(w+1);
divEle.onclick = (function(v) {
return function() { copyDiv( "DIVtext" + (v+1) ) };
})(w);
divEle.innerHTML = word[w];
demoEle.appendChild( divEle );
}
Demo: jsFiddle
Updated Demo:: jsFiddle Updated

You could use a loop (for(i=0;i<splittedArray;i++)) and jQuery to add div tags to the dom with the innerHtml being the word.
Basically, once you have it in your array you can put it wherever you want. I find that jQuery makes it easy; however, you could also do it through jscript alone.

This can be achieved pretty easily using jQuery.
var letters = $('#sw').val().split('');
$.each(letters, function(i, letter) {
$('<div />', {
id: 'DIVtext'+ i,
text: letter
}).appendTo('#demo');
});
JSFiddle
If jQuery isn't an option, here's what you can do with vanilla JS.
var letters = document.getElementById('sw').value.split(''),
demo = document.getElementById('demo');
for(var i = 0; i < letters.length; i++) {
var letter = document.createElement('div');
letter.innerHTML = letters[i];
letter.id = 'DIVtext'+ i;
demo.appendChild(letter);
}
JSFiddle

JavaScript regular expression: inserting span tag for each character

I have a regular expression task at hand and can really use some help.
Say I have a text like below:
To Sherlock Holmes she is always <i>THE</i> woman.
I need to enclose each character in a span tag, with exception of HTML tags. For example, the text above would be:
<span>T</span><span>o</span><span> </span><span>S</span><span>h</span>
<span>e</span><span>r</span><span>l</span><span>o</span><span>c</span>
<span>k</span><span> </span><span>H</span><span>o</span><span>l</span>
<span>m</span><span>e</span><span>s</span><span> </span><span>s</span>
<span>h</span><span>e</span><span> </span><span>i</span><span>s</span>
<span> </span><span>a</span><span>l</span><span>w</span><span>a</span>
<span>y</span><span>s</span><span> </span><i><span>T</span><span>H</span>
<span>E</span></i><span> </span><span>w</span><span>o</span><span>m</span>
<span>a</span><span>n</span><span>.</span>
Note that:
each character is enclosed in a span
tag, even a space
HTML tag, <i></i> is not
Any suggestion is welcome.
Thanks!

This job is better handled by DOM interactions. The following two utility functions will work help wrapping each character in the given text with a span tag.
/**
* recursively get all text nodes as an array for a given element
*/
function getTextNodes(node) {
var childTextNodes = [];
if (!node.hasChildNodes()) {
return;
}
var childNodes = node.childNodes;
for (var i = 0; i < childNodes.length; i++) {
if (childNodes[i].nodeType == Node.TEXT_NODE) {
childTextNodes.push(childNodes[i]);
}
else if (childNodes[i].nodeType == Node.ELEMENT_NODE) {
Array.prototype.push.apply(childTextNodes, getTextNodes(childNodes[i]));
}
}
return childTextNodes;
}
/**
* given a text node, wrap each character in the
* given tag.
*/
function wrapEachCharacter(textNode, tag) {
var text = textNode.nodeValue;
var parent = textNode.parentNode;
var characters = text.split('');
characters.forEach(function(character) {
var element = document.createElement(tag);
var characterNode = document.createTextNode(character);
element.appendChild(characterNode);
parent.insertBefore(element, textNode);
});
parent.removeChild(textNode);
}
Now given some piece of HTML, we will create a DOM representation of it, and then retrieve all text nodes from it using the first function - getTextNodes. Once we have all the text nodes, we can pass each one of them to the second function - wrapEachCharacter.
// create a wrapper element that will hold our HTML.
var container = document.createElement('div');
container.innerHTML = "To Sherlock Holmes she is always <i>THE</i> woman.";
// get all text nodes recursively.
var allTextNodes = getTextNodes(container);
// wrap each character in each text node thus gathered.
allTextNodes.forEach(function(textNode) {
wrapEachCharacter(textNode, 'span');
});
An example is posted here.

Something along this line should do the trick
txt = txt.replace (/(<.*?>)|(.)/g, function (m0, tag, ch) {
return tag || ('<span>' + ch + '</span>');
});

Don't use a regex, just loop over the string using a for loop:
var s = 'To Sherlock Holmes she is always <i>THE</i> woman.';
var out = '';
for (var z = 0; z < s.length; ++z) {
var ch = s.charAt(z);
if (ch == '<') {
while (ch != '>') {
out += ch;
ch = s.charAt(++z);
}
out += ch;
continue;
}
out += '<span>' + ch + '</span>';
}
alert(out);