I have added one text box . I am getting the text entered text box like :
var text = document.getElementById("textarea").value;
then by using split function I am getting one particular String from say first string from the text . And tried to apply string properly on that like :
var split = text.split(" ");
var word = split[0];
word.italics();
then I formed text again with changed properties of first string and reassigned it to the text box
document.getElementById("textarea").value = text;
but those string properties are not applying to the word . same issue with all string properties like font color ,link etc . I dont know whats wrong I am doing ?
You cannot format text in a textbox
Try
document.getElementById("someContainerLikeADivOrSpan").innerHTML=text
For example
Live Demo
window.onload=function() {
document.getElementById("text").onkeyup=function() {
var text = this.value;
var split = text.split(" ");
var word = split[0];
document.getElementById("output").innerHTML=word.italics();
}
}
using
<textarea id="text" placeholder="type some words"></textarea>
<span id="output"></span>
You should use a div,span or p element to get the italics word. Try this,
HTML
<textarea id="textarea">test the italics now.</textarea>
<div id="div"></div>
SCRIPT
text=text.replace(word,word.italics());// replace the first word with italics
document.getElementById("div").innerHTML = text;// use div not textarea
Demo
Related
I have been looking for way how I could filter data within textarea using regex function for a quite a while now without any success. Below is the regex I want to use to filter UK telephone numbers.
(((\+44\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((\+44\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((\+44\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?
Fiddle: https://jsfiddle.net/qdypo04y/
I want to achieve the result when the button is clicked it will remove lines which do not meet the regex? Alternatively would remove values which are not UK telephone numbers.
Any guidance would be appreciated.
Apart the use of textarea element your issue is:
how attach click event listener to your button (refer to: querySelector and addEventListener)
how get the content of textarea and split it into rows (refer to: textContent plus split and join)
finally how use your regex: refer to test
An example is:
document.querySelector('button').addEventListener('click', function(e) {
var txtArea = document.querySelector('textarea[rows="4"][cols="50"]');
var re = /(((\+44\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((\+44\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((\+44\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?/;
var txtArr = txtArea.textContent.split('\n');
txtArr.forEach(function(ele, idx) {
txtArr[idx] = ele + ' test result is: ' + re.test(ele);
});
txtArea.textContent = txtArr.join('\n');
});
<textarea rows="4" cols="50">
+447222555555
0800 042 0213
2017/07/14
2017/07/17
2017/07/27
</textarea>
<button>Click me</button>
<script>
function myFunction() {
var regexp = /(((\+44\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((\+44\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((\+44\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?/;
var content=$.trim($("textarea").val()).split('\n');
var result="";
for(var i = 0;i < content.length;i++){
if(regexp.test(content[i])){
result=result+content[i]+'\n';
}
}
$("textarea").val(result);
}
</script>
used JQuery to take the value from textarea
I want to decode the chinese characters into the input text field.But it is showing the field as it is.
But it is showing the "漢 ;字 ;" instead of chinese characters
Expected output :漢字
output :漢 ;字 ;
it is working fine when i use textarea
input type="text" id="chinese"
function myFunction() {
var uri_dec = decodeURIComponent("漢字")
document.getElementById("chinese").value= uri_dec;
}
Please help me on this
Thanks in advance
decodeURIComponent doesn't do what you think it does. It will decode "%E6%BC%A2%E5%AD%97" (an URI-encoded string) into "漢字"; but you have HTML entities, not an URI-encoded string.
var ent_enc = "漢字"
var div = document.createElement('div');
div.innerHTML = ent_enc;
var ent_dec = div.textContent;
document.getElementById("chinese").value = ent_dec;
<input type="text" id="chinese">
I want to extract the text part of the html.
If I have <p>ABCD</p>
I want the out put to be ABCD
Something like,
var html='<p>ABCD</p>';
var str = convertToString(html);
Hope, I will need a function which converts from html to string, or maybe extract string from it.
You can use jQuery to extract the text content from the string
var html = '<p>ABCD</p>';
var str = $(html).text();//get a jQuery reference and then read its text content
console.log(str)
All you need is a selector(id,class name etc) of get the required element of DOM and use .text() to get text part of the html.
HTML
<p>ABCD</p>
Jquery
var str = $('p').text(); // $('p') "p" is a selector to select p element(s)
console.log(str)
DEMO
JavaScript way
var txt = document.getElementById("demo").innerHTML;
alert(txt);
<p id="demo">Test text</p>
var html = '<p>ABCD</p>';
var str = $(html).text();
console.log(str);
This would do the task.
This
[b]this text is bold[/b]
[i]this text is [b]italic[/b][/i]
parse out to this (in html)
<b>this text is bold[/b]<br><i>this text is [b]italic</i></b>
this text is bold[/b]this text is [b]italic
using this function
function bbcode(input){
return input
.replace(/\[b\]([^]*)\[\/b\]/ig, '<b>$1</b>')
.replace(/\[i\]([^]*)\[\/i\]/ig, '<i>$1</i>');
}
I figure there has to be a problem with the regular expression finding each set of tags, but it appears that only the first bold tag and the last bold end tag are being parsed. Any idea how this can be fixed?
function bbcode(input){
var b = /\[b\]([^[]*(?:\[(?!b\]|\/b\])[^[]*)*)\[\/b\]/ig;
var i = /\[i\]([^[]*(?:\[(?!i\]|\/i\])[^[]*)*)\[\/i\]/ig;
while (input.search(b) !== -1) {
input = input.replace(b,'<b>$1</b>');
}
while (input.search(i) !== -1) {
input = input.replace(i,'<i>$1</i>');
}
return input.replace(/\n/ig, '<br>');
}
BBCode:
[b]x[b]y[/b]z[/b]
[b]this text is bold[/b]
[i]this text is [b]italic[/b][/i]
Usage:
var string = '[b]x[b]y[/b]z[/b]\n[b]this text is bold[/b]\n[i]this text is [b]italic[/b][/i]';
console.log(bbcode(string));
Output:
<b>x<b>y</b>z</b><br><b>this text is bold</b><br><i>this text is <b>italic</b></i>
See DEMO.
I'm looking for the Javascript to parse the following HTML:
<p>random text random text random text random text</p>
<kbd><h2>Heading One</h2>Body text Body text Body text Body text</kbd>
<p>random text random text random text random text</p>
... and return just:
Heading One
In other words, I'd like to strip all tags and Body Text from within the <kbd> tags.
Any ideas would be greatly appreciated!
var input = /* that HTML string here */;
var div = document.createElement('div');
div.innerHTML = input;
var h2 = div.getElementsByTagName('h2')[0];
var text = h2.innerText || h2.textContent;
alert(text); // alerts "Heading One"
Reference:
document.createElement
innerHTML
element.getElementsByTagName
Node.textContent (Quirksmode compatibility table)
Demo:
http://jsfiddle.net/mattball/vaVPF/
Regex?
var s = "<p>random text</p>\n" +
"<kbd><h2>Heading One</h2>Body text</kbd>\n" +
"<p>random text</p>";
s.match(/<h2>(.*?)<\/h2>/)[1] // == "Heading One"
This matches group one as the shortest possible (.*?) string between <h2>...</h2>.
You can find all matches using the g option.
s.match(/<h2>(.*?)<\/h2>/g) // == ["<h2>Heading One</h2>"]
Note that groups are not accessible.
For multiline content between tags, use
s.match(/<tag>[\s\S]*?<\/tag>/ig)
if you include jquery (jquery.com) you can do this:
var heading=$("h2").html();