How do I select all text contained in <pre> using jQuery? - javascript

I have a contentEditable iframe with line numbers and text. The line numbers are contained in a div and all text is in a <pre>-element.
It looks like this:
<body>
<div id="line_numbers">
<div>1</div><div>2</div><div>3</div>
</div>
<pre>
Text
</pre>
</body>
Now, when someone presses Ctrl+A everything is selected, including the line numbers. I would like to change this behaviour to only include the contents of the <pre>.
I have set up a function that captures Ctrl+A and prevents the default operation. Now, how do I set the selection to contain everything within the <pre>?

This answer will help you out I think; you should be able to select the pre element using jQuery and pass it into the function supplied:
SelectText($('pre')[0]);

Have you $("#iframe_id").contents().find('pre').text()?

Related

Javascript: How to double click on partial text value of a element

How to double click on partial value of the text from a element using javascript.
Example:
Site : https://www.crm.com/resource-category/all/
Xpath of Html element : (//div[#class='col-12 offset-md-1 col-md-11'])[2]
text value : Helpful resources to get you oriented around CRM.COM
Now, I want to go to the above Site and get the text of the element with the above xpath. until this point its fine. Its a tag with simple text. But now, I want to double click on the partial text of the div element which is "Resources" in javascript
Attached image. tag has whole text value as "Helpful resources to get you oriented around CRM.COM" but I want code to double click the partial text which can be "resources to get".
please help
Inspected value on the website
#skr, Its a simple text element within tag. when I double click on partial text, a popup appears and I need to automate the scenario. Thanks –
Here is what you asked. I used jQuery, but you can use vanilla if you want.
$('.clickable span').click(function(){
alert('do something');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickable">
<p>A small text so you can <span><u>click here</u></span></p>
</div>

Only allow certain tags in contenteditable div

I have a contenteditable div and using keyboard shortcuts like ctrl+i the user is able to format the text. And as they type the innerHTML changes reflecting the tags i.e:
Hello <i>thanks for <br><br>for showing up<b> y'all b</b></i>
This is fine, and works well for my purposes. but the issue arises that when I go to print the html in a different div IF a user adds any other html tags, they could really mess up the application.
For instance, if they added a <script> tag or style etc.. How do I make it that the user is only allowed to add <i>, <br>, <b>, <s>, and without being able to add anything else?
Any ideas? Thank you
I think that you can use a regExpresion to avoid the "indeseables" tags. Some like
<textarea #data [(ngModel)]="value" (input)="replace(data)"></textarea>
<div [innerHtml]="valueParse">
</div>
replace(control:any)
{
this.valueParse=control.value.replace(/<(?!br|i|u)((\w+))>/gm,"&lt$1&gt")
.replace(/<\/(?!br|i|u)((\w+))>/gm,'&lt\/$1&gt');
}
See stackblitz

javascript: how to use a hidden tag to direct text update of larger object without line breaks added?

Of course, we can update all the text of an object like this:
document.getElementById(objId).innerHTML = "some text we like";
What I'm looking to do is update a subset of existing text, with the target to be replaced being identified by a hidden tag. So, for example instead of having to parse something like this in my own code:
<p> Here's a huge block of text, many lines long and
**here's the part I want to update,** buried within it and yet there's even more afterwards.</p>
...instead I want to (and can) do something like this:
<p> Here's a huge block of text, many lines long and <option id="target">**here's the part I want to update,**</option> buried within it and yet there's even more afterwards.</p>
...And then update that with:
document.getElementById("target").innerHTML = "replacement text we like";
Unremarkably, this works, BUT, it has the effect of adding line breaks, as if there was a <br> tag where there's <option> and </option>.
Here's the EFFECTIVE result of that call:
<p> Here's a huge block of text, many lines long and<br> replacement text we like<br> buried within it and yet there's even more afterwards.</p>
How can I do this WITHOUT the line breaks being inserted?
You can do this with a <span> tag instead of a <div>. Here is a working JSFiddle.
Elements like <option> or <div> are block elements. You need to use an inline element so you can use <span> instead of <option>:
function myFoo() {
document.getElementById("target").innerHTML = "replacement text we like";
}
<p> Here's a huge block of text, many lines long and <span id="target">**here's the part I want to update,**</span> buried within it and yet there's even more afterwards.</p>
<button id="btn" onclick="myFoo()">Change Text!</button>

Better approach than using append in div contenteditable

I have a contenteditable div, in which if user presses enter after some content, two break tags gets created.
line 1
</br>
</br>
If user manually starts typing it becomes
line 1
</br>
line 2
</br>
But i am using jQuery append function to put some html content
jQuery('.editor').append(e.target.innerHTML);
But it becomes
line 1
</br>
</br>
html content
Is there any way to not have two line gap between the content?
I too faced the same kind of problem, And it also adds '&lt', '$gt', etc sometimes. I used the below regular expression to delete all the html tags. When you call the onblur event, inside the function use the below code to remove tags. It also works even if you copy and paste the content in the editable div.
x = x.replace(/(<[^\\>]*>|<br\/>|&|amp;|&lt|>)/g, '');
x = x.trim();
Hope this is what you are looking for.

custom textarea with image inside

i was wondering how does on many websites when i add a smile on textarea appears image instead of ex. :), so i want to ask you how it is possible, i need a simple example...
for example
i have :
<img class="smile" src="smiles/smile1.gif" alt=":)" onclick="add_smile(1);"/><br/>
<textarea></textarea>
so i want onclick of image (.smile) to be added image on textarea, then to be possible to insert some words after image, or just explain me how does it may be done ( is there an <div> element or it is a <textarea> or idk what it can be.. )
thanks
What you are seesing on many sites is not a textarea. It's a div with contentEditable attribute which acts like a textarea. That's how wysiwyg editors are created.
<div contentEditable="true"> Type here. You can insert images too </div>
Check working example at http://jsfiddle.net/6bCRJ/

Categories

Resources