Find html character and reduce size, not sure what the function is to do this?
jQuery("body").children().each(function () {
jQuery(this).html( jQuery(this).html().match("•").attr('style', "font-size:'9px'"));
});
As commented,
You will have to set style to element and not string.
To do this, you will have to fetch the string and then wrap matched string in an element with necessary style.
In your code jQuery(this).html().match("•").attr('style', "font-size:'9px'"), .match will return an array of matched values. They are still string and not HTML Element.
Sample
document.getElementById("btn").addEventListener("click", handleClick);
function handleClick(){
var input = document.getElementById("input").value;
if(!input) return;
var p = document.querySelector("p");
var parsed = p.innerHTML.replace(new RegExp(input, "gi"), function(t){
return "<span class='highlight'>" + t + "</span>"
});
p.innerHTML = parsed;
}
.highlight{
font-size: 12px;
border-bottom: 1px dashed gray;
}
span{
font-size: 16px;
}
<p> This is a sample Text</p>
<input type="text" id="input" />
<button id="btn">Update Style</button>
Related
I have a script that can add paragraphs to a div. These paragraphs have some text and a delete button in them. This delete button should be able to delete the paragraph its in including its text (so delete the whole paragraph), but it doesn't.
var elementCounter2 = 0;
function addElement2() {
elementCounter2++;
var p = document.createElement("p");
var node = document.createTextNode("This is element number " + elementCounter2);
p.setAttribute("id", "p" + elementCounter2);
p.appendChild(node);
p.innerHTML += ' <button id="del' + elementCounter2 + '" onclick="deleteElement2();">Delete this element.</button>';
document.getElementById("elements2").appendChild(p);
}
function deleteElement2() {
var p = document.getElementById("p" + elementCounter2);
var btn = document.getElementById("del" + elementCounter2);
//Button sees its own id and look for the corresponding p id, then deletes the paragraph.
}
.borderful {
border: solid 1px black;
margin: 10px;
padding: 10px;
}
<div class="borderful">
<p>Here is the second part</p>
<p>You can add elements here.</p>
<p>You can delete these aswell but differntly.</p>
<button onclick="addElement2();">Add an element.</button>
<div id="elements2"></div>
</div>
You can setup an event listener on each newly created paragraph (ditching the inline code) and forget about the counter (kept here to show the code working)
var elementCounter2 = 0;
function addElement2() {
elementCounter2++;
var p = document.createElement("p");
var node = document.createTextNode("This is element number " + elementCounter2);
p.setAttribute("id", "p" + elementCounter2);
p.appendChild(node);
p.innerHTML += ' <button>Delete this element.</button>';
document.getElementById("elements2").appendChild(p);
var el = document.getElementById("p" + elementCounter2);
el.addEventListener("click", deleteElement2, false);
}
function deleteElement2() {
this.remove()
}
.borderful {
border: solid 1px black;
margin: 10px;
padding: 10px;
}
<div class="borderful">
<p>Here is the second part</p>
<p>You can add elements here.</p>
<p>You can delete these aswell but differntly.</p>
<button onclick="addElement2();">Add an element.</button>
<div id="elements2"></div>
</div>
This should work
var elementCounter2 = 0;
function addElement2() {
elementCounter2++;
var p = document.createElement("p");
var node = document.createTextNode("This is element number " + elementCounter2);
p.setAttribute("id", "p" + elementCounter2);
p.appendChild(node);
p.innerHTML += ' <button id="del' + elementCounter2 + '" onclick="deleteElement2(this);">Delete this element.</button>';
document.getElementById("elements2").appendChild(p);
}
function deleteElement2(caller) {
// caller = button
document.getElementById("del" + caller.id.substr(3)).parentNode.remove();
}
.borderful {
border: solid 1px black;
margin: 10px;
padding: 10px;
}
<div class="borderful">
<p>Here is the second part</p>
<p>You can add elements here.</p>
<p>You can delete these aswell but differntly.</p>
<button onclick="addElement2();">Add an element.</button>
<div id="elements2"></div>
</div>
A simple approach is referring to the paragraph as a parent element instead of worrying how to reference it directly.
function deleteElement2() {
this.parentElement.remove();
}
However, adding the button as
p.innerHTML += ' <button id="del'+ elementCounter2 +'" onclick="deleteElement2();">Delete this element.</button>';
Is not a good practice since you are adding HTML element in Javascript, when you can go about doing this in Javascript only.
To learn more about your original question or how to do this in JS, refer to this very similar example given by CS50W lecture on YouTube: https://youtu.be/ZRV7JCXAFTs?t=2486
Here I want to randomly change the CSS of each character of text.
Like if I input Stack I will get S in red, t in blue, a in green... etc on the bottom of the input field.
var myModel = {
name: "Mayur",
};
var myViewModel = new Vue({
el: '#my_view',
data: myModel
});
span{
color:green;
font-weight:600;
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div id="my_view">
<label for="name">Enter name:</label>
<input type="text" v-model="name" id="name" name="name" />
<p>Welcome, <span>{{ name | uppercase }}</span></p>
</div>
I haven't worked with Vue and I'm not familiar with its internal events and processes, but here's a tiny prototype i made in plain JavaScript:
document.querySelector('button').onclick = function (){
let span = document.querySelector('span.letters'),
text = span.textContent;
span.innerHTML = '';
Array.from(text).map(function(l){
let color = document.createElement('span');
color.innerHTML = l;
color.style.color = 'rgb(' +
randInterval(0, 255) + ',' +
randInterval(0, 255) + ',' +
randInterval(0, 255) + ')';
span.appendChild(color);
});
}
function randInterval(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
<div><span class="letters">STACK</span></div>
<button>Random colors</button>
I've purposefully placed the function that randomizes each value of rgb() in a function, so you can alter it easily (now the colors are trully random). If you want to make the darker, you need to lower the max values. If you want the colors lighter, you need to increase the mins.
Html:
<div>Type something here, then click on the white space beneave.</div>
<input type="hidden" id="hidden">
Javascript:
$("div").prop("contentEditable", true).blur(function(){
var chars = $(this).text().split("");
$("#hidden").val($(this).text());
this.innerHTML = "";
$.each(chars, function(){
$("<span>").text(this).css({
color: "#"+(Math.random()*16777215|0).toString(16)
}).appendTo("div");
});
});
Css:
div{
border: 1px solid black;
width: 400px;
height: 20px;
padding: 2px 3px;
overflow: hidden;
}
You can visit http://jsfiddle.net/DerekL/Y8ySy/ for the implementation!
Both html and css codes are given in the link.
It gives the colour to the characters randomly but it can be manipulated easily or if you want them to run randomly, you can use it directly.
I would like to display a text copied from a site, for example Wikipedia, in a div. This text has to be strictly without the tags that the computer copies with the text from wikipedia.
I think that the solution is to set a sort of formatting of the text but I don't know.
This is how it should be (Press OK). But I don't want to paste the text in the code, I have to paste the text in the textarea.
In fact if you try to paste something from Wikipedia in the textarea of this Jsfiddle you will see that the result is horrible and with all the html tags.
HTML:
<div id="faketxt" contenteditable></div>
<button id='btn'>OK</button>
<button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
</button>
<button class="fontStyle" onclick="document.execCommand( 'underline',false,null);"><u>U</u>
</button> <br>
<div id='boxes'>
</div>
CSS:
#faketxt {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
height: 28px;
overflow: auto;
padding: 2px;
resize: both;
width: 400px;
}
.fakes{
width: 150px;
height: 300px;
font-size: 10px;
border-style: solid;
display:inline-block;
float: left;
}
#boxes{
display : flex;
display:inline-block;
}
jQuery:
$('#btn').click(function() {
var primo = document.getElementById('faketxt');
var wordLimit = 130;
var words = primo.innerHTML.replace(/(<([^>]+)>)/ig,"").split(/\s/);
if (words.length) {
var count = 0;
var div = createDiv();
var bold = false;
words.forEach(function(word) {
if (++count > wordLimit) {
count = 1;
div = createDiv();
}
if (div.innerHTML) {
div.append(' ');
}
if (word.indexOf('<b>') != -1) {
bold = true;
}
if (bold) {
$(div).html($(div).html() + '<b>' +
word + '</b>');
} else {
$(div).html($(div).html() +
word);
}
if (word.indexOf('</b>') != -1) {
bold = false;
}
});
}
});
function createDiv() {
div = document.createElement('div');
div.className = 'fakes';
document.getElementById('boxes').append(div);
return div;
}
innerHTML or jquery's $.html() will pull the content (including HTML) of an element. But textContent or jquery's $.text() will just get the text.
Instead of var words = primo.innerHTML have you tried using var words = primo.textContent or var words = $(primo).text()?
try using
words = primo.textContent.replace(/(<^>]+)>)/ig,"").split(/\s/);
instead of
words = primo.innerHTML.replace(/(<([^>]+)>)/ig,"").split(/\s/);
Rather than getting the innerHTML of the source, simply get the text content using either the javascript or JQuery text() functions.
So, given you are using jQuery, change your words variable to initialise as follows.
var words = $(primo).text().split(/\s/);
I am currently writing my own BBCode parser. Now what I would like to do is allow the user to enter BBCode, and then it will write it into HTML and display it has HTML. Yet if they enter HTML it will just show it as plain old HTML. Here is what I have so far:
var replacebbcode = $('#textareainput').val().replace(/(\[((\/?)(b|u|i|s|sub|sup))\])/gi, '<$2>');
$('#posttextareadisplay').html(replacebbcode);
In the above I am just replacing all BBCode with HTML tags. Problem is if a user directly enter HTML it will use that as well. So basically, how can I display BBCode as HTML, but actual HTML as text?
Set the target's text() with the full text; so your HTML tags will be encoded. Then do the BBCode replacement on the encoded HTML:
$('#posttextareadisplay').text( $('#textareainput').val() );
var replacebbcode = $('#posttextareadisplay').
html().
replace(/(\[((\/?)(b|u|i|s|sub|sup))\])/gi, '<$2>');
$('#posttextareadisplay').html( replacebbcode );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea name="" id="textareainput" cols="30" rows="10">
[b]bold[/b] <bold>bold</bold>
</textarea>
<p id="posttextareadisplay"></p>
If you want to replace with regular html tags and restrict to only specific BB tags. This is how it's done with a little help from jQuery and Regular Expression:
const replaceBBCodeAsElements = (jElement, tagMapping = {}) =>
jElement.html(jElement.html().replace(/\[(?<tag>\w+)\](.+?)\[\/\k<tag>\]/g,
(...{ 0: original, 1: tagName, 2: tagContent }) =>
tagMapping.hasOwnProperty(tagName) ? $(tagMapping[tagName]).html(tagContent)[0].outerHTML : original
));
And here is an example of using this function:
const replaceBBCodeAsElements = (jElement, tagMapping = {}) =>
jElement.html(jElement.html().replace(/\[(?<tag>\w+)\](.+?)\[\/\k<tag>\]/g,
(...{ 0: original, 1: tagName, 2: tagContent }) =>
tagMapping.hasOwnProperty(tagName) ? $(tagMapping[tagName]).html(tagContent)[0].outerHTML : original
));
const config = {
'a': '<div class="tag some-special-a-tag" />',
'object': '<span class="tag some-special-object-tag" />',
'pre': '<p class="tag some-special-pre-tag" />',
'test': '<div data-hello="world" class="tag some-special-test-tag" />',
};
$("#input").bind("input", function() {
const jRes = $("#result");
jRes.text(this.value);
replaceBBCodeAsElements(jRes, config);
}).trigger('input');
#input {
width: 400px;
height: 100px;
}
#result {
white-space: pre-wrap;
}
.tag {
display: inline-block;
background: rgba(0,0,0,.1);
padding: 0 4px;
border-radius: 5px;
font-family: monospace;
font-weight: bold;
margin: 0;
box-shadow: 0 0 10px 0 rgba(0,0,0,.6);
}
.some-special-a-tag {
background: rgba(255,0,0,.1);
}
.some-special-object-tag {
background: rgba(0,255,0,.1);
}
.some-special-pre-tag {
background: rgba(0,0,255,.1);
}
.some-special-test-tag {
background: rgba(0,255,255,.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="input">This <p>is</p>
a [a]test[/a] text [pre]with[/pre] [b]some[/b] va[test]lu[/test]e.
And this is how it looks [object]when a [pre]tag inside[/pre] other[/object] tag</textarea>
<div id="result"></div>
The above example, will parse only [a], [object], [pre] and [test] BB tags and convert them according to the creation element they are pointing to.
Note, that the minimum required version of JS is ES2018, because of the RegExp Named Group support.
I am trying to get the formatted text from a contenteditable='true' div to send to my server.
I used to use a textarea and when you get the value of a textarea it preserves white space and line breaks, but when using a contenteditable div even when using styles such as the following I can not get the properly formatted text:
white-space: pre-wrap;
word-wrap: break-word;
For example if I type this into my div:
"a
aa
asdf"
I will get this out with textContent:
"a aaasdf"
Is there any way to get formatted text out of a contenteditable div like a textarea?
Use .innerHTML to get the linebreaks too.
Readup: .innerHTML | MDN
Working Code Snippet:
document.getElementById('copy').addEventListener('click', function(){
var text = document.getElementById('input').innerHTML;
document.getElementById('output').innerHTML = text;
});
div{
width: 200px;
height: 200px;
border: 1px solid black;
display: inline-block;
vertical-align: top;
}
<div contenteditable='true' id="input">Enter something funny<br>;)</div>
<button id="copy">Copy Text</button>
<div id="output">Text will be copied here.</div>
Example from: Extracting text from a contentEditable div
function getContentEditableText(id) {
var ce = $("<pre />").html($("#" + id).html());
if ($.browser.webkit)
ce.find("div").replaceWith(function() { return "\n" + this.innerHTML; });
if ($.browser.msie)
ce.find("p").replaceWith(function() { return this.innerHTML + "<br>"; });
if ($.browser.mozilla || $.browser.opera || $.browser.msie)
ce.find("br").replaceWith("\n");
return ce.text();
}
Or:
$.fn.getPreText = function () {
var ce = $("<pre />").html(this.html());
if ($.browser.webkit)
ce.find("div").replaceWith(function() { return "\n" + this.innerHTML; });
if ($.browser.msie)
ce.find("p").replaceWith(function() { return this.innerHTML + "<br>"; });
if ($.browser.mozilla || $.browser.opera || $.browser.msie)
ce.find("br").replaceWith("\n");
return ce.text();
};
This require jQuery, though.
When you enter content into a contenteditable element, this auto-generates HTML nodes within the target element.so you need to access its .innerHTML property and treat the content as HTML, not plain text
You can access this HTML content using the .innerHTML property, or you can use .innerText, which returns plain text but preserves the formatting as shown in #Rahul Desai's answer and in this blog post:
document.getElementById('getText').onclick = function () {
console.log(document.getElementById('edit').innerHTML);
};
<div id='edit' contenteditable='true'>Type here</div>
<input id='getText' type='button' value='Get Text' />
If I enter
Hello
how
are you
into that div and then click the button, the console shows:
<p>Hello</p><p>how</p><p><br></p><p>are you</p>
document.getElementById('getText').onclick = function () {
console.log(document.getElementById('edit').innerHTML);
};
<div id='edit' contenteditable='true'>Type here</div>
<input id='getText' type='button' value='Get Text' />